Tuesday 9 May 2017
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
------------------------------------------------------------------------------------------------------------
Read More:
https://codepen.io/macbobbitt_/pen/jmEBL
https://codepen.io/dudleystorey/pen/ehKpi
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<style class="cp-pen-styles">
#slider-wrapper {
width: 940px;
height: 470px;
margin: 50px auto;
position: relative;
margin-bottom: 0px;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
#s1 {
padding: 6px;
background: #ff2800;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s2 {
padding: 6px;
background: #7bd51b;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s3 {
padding: 6px;
background: #000088;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s4 {
padding: 6px;
background: #FFD700;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.inner-wrapper {
width: 940px;
height: 470px;
position: absolute;
top: 0;
left: 0;
margin-bottom: 0px;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .overflow-wrapper {
margin-left: 0%;
}
#Slide2:checked ~ .overflow-wrapper {
margin-left: -100%;
}
#Slide3:checked ~ .overflow-wrapper {
margin-left: -200%;
}
#Slide4:checked ~ .overflow-wrapper {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.slide img {
width: 25%;
float: left;
}
.overflow-wrapper {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s
ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
animation: 30s slidy infinite;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
</style>
</head>
<body>
<div id="slider-wrapper">
<div class="inner-wrapper">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="overflow-wrapper">
<a class="slide" href=""><img src="https://dummyimage.com/600x400/ff2800/000.png&text=1" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/7bd51b/000.png&text=2" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/000088/FFD700.png&text=3" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/FFD700/000.png&text=4" /></a>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------
USE ONE IMAGE IN KEY FRAME SLIDERNEED 4 IMAGES ADD INTO ONE IMAGE
IMAGE SIZE W:800 X H: 400
--------------------------------------------------------------------------
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
#slideshow{
position: relative;
width: 200px;
height: 400px;
overflow: hidden;
border: 5px solid #fff;
}
#slideshow img{
position: absolute;
left: 0;
top: 0;
animation: slide 5s infinite;
}
@keyframes slide{
0%{ transform:translateX(0px) }
25%{ transform:translateX(-200px) }
50%{ transform:translateX(-400px) }
75%{ transform:translateX(-600px) }
100%{ transform:translateX(0px) }
}
</style>
</head>
<body>
<div id="slideshow">
<img src="http://oi67.tinypic.com/24mia39.jpg">
</div>
</body>
</html>
--------------------------------------------------------------------------
OR USE THIS CSS CODE
--------------------------------------------------------------------------
<html>
<head>
<style class="cp-pen-styles">
#slider-wrapper {
width: 940px;
height: 470px;
margin: 50px auto;
position: relative;
margin-bottom: 0px;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
#s1 {
padding: 6px;
background: #ff2800;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s2 {
padding: 6px;
background: #7bd51b;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s3 {
padding: 6px;
background: #000088;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s4 {
padding: 6px;
background: #FFD700;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.inner-wrapper {
width: 940px;
height: 470px;
position: absolute;
top: 0;
left: 0;
margin-bottom: 0px;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .overflow-wrapper {
margin-left: 0%;
}
#Slide2:checked ~ .overflow-wrapper {
margin-left: -100%;
}
#Slide3:checked ~ .overflow-wrapper {
margin-left: -200%;
}
#Slide4:checked ~ .overflow-wrapper {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.slide img {
width: 25%;
float: left;
}
.overflow-wrapper {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s
ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
animation: 20s slider infinite;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
</style>
</head>
<body>
<div id="slider-wrapper">
<div class="inner-wrapper">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="overflow-wrapper">
<a class="slide" href=""><img src="https://dummyimage.com/600x400/ff2800/000.png&text=1" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/7bd51b/000.png&text=2" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/000088/FFD700.png&text=3" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/FFD700/000.png&text=4" /></a>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------
KEY FRAME SLIDER CSS
https://codepen.io/dudleystorey/pen/ehKpi
https://github.com/VladVasiljev/Web-Design
https://github.com/VladVasiljev/Web-Design
---------------------------------------------------------------------------
<html>
<head>
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;
float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
</style>
</head>
<body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
ReadMore:
http://qnimate.com/creating-a-slider-using-html-and-css-only/
DUMMY IMAGE GENERATOR
http://dummy-image-generator.com/
OR
https://dummyimage.com
----------------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
ReadMore:
http://qnimate.com/creating-a-slider-using-html-and-css-only/
DUMMY IMAGE GENERATOR
http://dummy-image-generator.com/
OR
https://dummyimage.com
----------------------------------------------------------------------------------------------------------------------
<html>
<!--http://qnimate.com/creating-a-slider-using-html-and-css-only/-->
<TITLE>Image Slider Using
HTML And CSS Only</TITLE>
<head>
</head>
<STYLE>
.slider-holder{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
/* IMAGE AUTO SLIDER CODE */
animation:
20s slider infinite;
}
/* IMAGE AUTO SLIDER CODE */
@keyframes
slider {
0%
{
left:
0;
}
20%
{
left:
0;
}
25%
{
left:
-100%;
}
45%
{
left:
-100%;
}
50%
{
left:
-200%;
}
70%
{
left:
-200%;
}
75%
{
left:
-300%;
}
95%
{
left:
-300%;
}
100%
{
left:
-400%;
}
}
.slider-image{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder{
left: 0px;
}
#slider-image-2:target ~ .image-holder{
left: -800px;
}
#slider-image-3:target ~ .image-holder{
left: -1600px;
}
.button-holder{
position: relative;
top: -20px;
}
.slider-change{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
</STYLE>
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<!--MAKE IMAGES WITH
http://dummy-image-generator.com/ WIDTH:800 X HEIGHT:400 -->
<img src="http://img.dummy-image-generator.com/_mono/dummy-800x400-color730046.jpg" class="slider-image" />
<img src="http://img.dummy-image-generator.com/_mono/dummy-800x400-colorBFBB11.jpg" class="slider-image" />
<img src="http://img.dummy-image-generator.com/_mono/dummy-800x400-color0096C2.jpg" class="slider-image" />
</div>
<div class="button-holder">
<!--RADIO BUTTON-->
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
PURE HTML CSS SLIDER WITHOUT JAVASCRIPT OR JQUERY
ReadMore:
http://ascii.cl/htmlcodes.htm
https://www.w3schools.com/howto/howto_css_next_prev.asp
http://seowebsitedesigning.com/pure-html-css-slider-without-javascript-or-jquery/
----------------------------------------------------------------------------------------------------------------------
PURE HTML CSS SLIDER WITHOUT JAVASCRIPT OR JQUERY
ReadMore:
http://ascii.cl/htmlcodes.htm
https://www.w3schools.com/howto/howto_css_next_prev.asp
http://seowebsitedesigning.com/pure-html-css-slider-without-javascript-or-jquery/
----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html >
<!--
https://github.com/you-dont-need/You-Dont-Need-JavaScript/tree/master/examples
-->
<!--
http://seowebsitedesigning.com/pure-html-css-slider-without-javascript-or-jquery/
-->
<head>
<meta charset="UTF-8">
<title>PURE HTML CSS SLIDER
WITHOUT JAVASCRIPT OR JQUERY</title>
<style>
html, body {
margin: 0px auto;
padding: 0px;
background: #fecd76;
}
.carousel {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0,
0.64);
margin-top: 26px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item
{
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s
ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~
.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~
.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~
.carousel-indicators li:nth-child(3) .carousel-bullet {
color: #ff0000;
}
h1, a {text-align: center;
text-decoration:none; color:#3399FF; font-weight: bold;}
</style>
</head>
<body style="max-width:940px;">
<h1>Pure HTML CSS Slider
Without JavaScript or Jquery</h1>
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="http://i0.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Stop-Double-Form-Submission-Using-Jquery-and-Ajax.jpg?w=940">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://i1.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Find-and-Remove-Duplicate-Data-From-MYSql-table.jpg?w=940">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://i2.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Avoid-Spammers-With-Motion-CAPTCHA-Using-JQuery.jpg?w=940">
</div>
<label for="carousel-3" class="carousel-control prev control-1">«</label>
<label for="carousel-2" class="carousel-control next control-1">»</label>
<label for="carousel-1" class="carousel-control prev control-2">«</label>
<label for="carousel-3" class="carousel-control next control-2">»</label>
<label for="carousel-2" class="carousel-control prev control-3">«</label>
<label for="carousel-1" class="carousel-control next control-3">»</label>
<ol class="carousel-indicators">
<li>
<!-- • HTML BULLET NUMBER
http://www.ascii.cl/htmlcodes.htm -->
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
<br>
<a href="http://seowebsitedesigning.com/" target="_blank">Back to Home</a>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
IMAGE SIZE 1024X768
http://basicuse.net/articles/pl/textile/html_css/simple_image_slider_with_a_responsive_design_using_only_css3#example_1
---------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
IMAGE SIZE 1024X768
http://basicuse.net/articles/pl/textile/html_css/simple_image_slider_with_a_responsive_design_using_only_css3#example_1
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Example 1 / Simple
image slider with a responsive design using only CSS3 / HTML & CSS / Markup languages / Programming
languages / Articles / BASICuse / Home - BASICuse</title>
<style type="text/css">
div#page {
width: auto;
text-align: center;
}
#image-slider {
margin: 40px 0;
display: inline-block;
height: auto;
max-width: 100%;
overflow: hidden;
position: relative;
}
#image-slider .ratio {
visibility: hidden;
}
#image-slider .image {
top: 0;
position: absolute;
z-index: 5;
opacity: 0;
left: -100%;
-webkit-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-o-transition: all linear 400ms;
transition: all linear 400ms;
}
#image-slider .ratio,
#image-slider .image {
display: block;
height: auto;
max-width: 100%;
}
#image-slider input:checked + .image {
z-index: 10;
opacity: 1;
left: 0;
}
#image-slider input {
display: none;
}
</style>
</head>
<body>
<div id="page">
<div id="image-slider">
<img src=" https://dummyimage.com/1024x768/000/fff" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide1" type="radio" checked >
<img class="image" src=" https://dummyimage.com/1024x768/000/fff" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide2" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1406/6782/file/nature2.jpg" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide3" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1407/6784/file/nature3.jpg" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide4" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1408/6786/file/nature4.jpg" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide5" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1409/6788/file/nature5.jpg" alt="">
<div class="navigation">
<label for="slide1">1</label>
<label for="slide2">2</label>
<label for="slide3">3</label>
<label for="slide4">4</label>
<label for="slide5">5</label>
</div>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
http://stackoverflow.com/questions/42405127/css-sliding-an-image-with-radiochecked-pure-css-slider
----------------------------------------------------------------------------------------------------------------
DOG RADIO BUTTON SLIDER
IMAGE SIZE 640 X 360
---------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
Pure CSS Slider with CSS3 Keyframes
----------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
http://stackoverflow.com/questions/42405127/css-sliding-an-image-with-radiochecked-pure-css-slider
----------------------------------------------------------------------------------------------------------------
<html>
<!--http://stackoverflow.com/questions/42405127/css-sliding-an-image-with-radiochecked-pure-css-slider-->
<TITLE>Image Slider Using
HTML And CSS Only</TITLE>
<head>
</head>
<STYLE>
img {
position: absolute;
top: 0;
left: 0;
transition: opacity .5s ease-out,
transform .5s ease-out;
transform: translateX(-100%);
/* transform: translateX(-100%)
rotate(-720deg); */ /* try this, it's nuts */
opacity: 0;
}
input:checked
+ img {
transform:
translateX(0);
/*
transform: translateX(0) rotate(0); */ /* try this with the commented line
above */
opacity:
1;
z-index:
1;
}
.controls
{
position:
absolute;
top:
0; left: 0;
z-index:
2;
}
label
{
background:
rgba(0,0,0,0.8);
color:
#fff;
padding:
.5em;
margin:
0 1em 0 0;
display:
inline-block;
cursor:
pointer;
}
</STYLE>
</head>
<body>
<div id="wrap">
<input type="radio" id="slide1" name="radio" checked>
<img src="https://dummyimage.com/560x400/000/fff" />
<input type="radio" id="slide2" name="radio">
<img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg">
<input type="radio" id="slide3" name="radio">
<img src="https://timedotcom.files.wordpress.com/2016/08/henry-winkler.jpg?quality=85">
<div class="controls">
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<label for="slide3">slide3</label>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------DOG RADIO BUTTON SLIDER
IMAGE SIZE 640 X 360
---------------------------------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<!--
http://www.cssscript.com/basic-image-slideshow-with-pure-css/ -->
<!--
http://www.cssscript.com/pure-css-slider-with-css3-keyframes/ -->
<head>
<style>
.slideshow {
width: 640px;
height: 360px;
position: relative;
text-align: center;
line-height: 750px;
padding-bottom: 30px;
}
.slideshow
input[type="radio"] {
font-size: .75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: .3s ease-out background,
.3s ease-out transform;
}
.slideshow
input[type="radio"]:checked {
background: #999;
outline: none;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slideshow .slideshow-item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 0;
opacity: 0;
transition: .3s ease-out opacity;
}
.slideshow .slideshow-item label {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slideshow .slideshow-item label:after
{
display: block;
content: '\25B6';
font-size: 2em;
color: #fff;
position: absolute;
top: 50%;
right: 10px;
margin-top: -.5em;
}
.slideshow .slideshow-item
label.previous {
left: 0;
display: block;
}
.slideshow .slideshow-item
label.previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;
}
.slideshow .slideshow-item label.next {
left: 50%;
display: block;
}
.slideshow
input[type="radio"]:checked + .slideshow-item {
opacity: 1;
}
</style>
</head>
<body>
<h1>Pure CSS slideshow</h1>
<p>A proof of concept to
have an image slideshow without javascript</p>
<div class="slideshow">
<input type="radio" name="slide" id="item-1" checked="checked" />
<div class="slideshow-item">
<img src="https://dummyimage.com/640x360/000/fff" />
<label for="item-3" class="previous">Go to slide 3</label>
<label for="item-2" class="next">Go to slide 2</label>
</div>
<input type="radio" name="slide" id="item-2" />
<div class="slideshow-item">
<img src="https://unsplash.it/640/360?image=659" />
<label for="item-1" class="previous">Go to slide 1</label>
<label for="item-3" class="next">Go to slide 3</label>
</div>
<input type="radio" name="slide" id="item-3" />
<div class="slideshow-item">
<img src="https://unsplash.it/640/360?image=649" />
<label for="item-2" class="previous">Go to slide 2</label>
<label for="item-1" class="next">Go to slide 1</label>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<!--
http://www.cssscript.com/pure-css-slider-with-css3-keyframes/ -->
<!-- https://jsfiddle.net/vzxfm7b1/2/ -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Slider with
CSS3 Keyframes</title>
<style>
* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
list-style: none;
}
body {
background: #4d6a8f
url(../images/bg-image.jpg) repeat-x;
font-family: 'Arial', sans-serif;
}
#container {
width: 718px;
overflow: hidden;
margin: 150px auto;
}
h1 {
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li {
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a {
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255, 255,
255, .25), inset 1px 1px 0px rgba(0,0,0, .15);
}
ul.thumbs img { border: #333 solid 4px;
}
ul.slides {
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a,
ul.slides img {
width: 705px;
height: 350px;
position: relative;
}
ul.slides li {
position: absolute;
z-index: 50;
}
ul.thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px
rgba(0,0,0, .4);
-moz-box-shadow: 0px 1px 0px
rgba(0,0,0, .4);
box-shadow: 0px 1px 0px rgba(0,0,0,
.4);
background: #fff; /* older browsers */
background:
-webkit-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
background: -moz-linear-gradient(top,
#fff, 0%, #bcbcbc, 100%);
background: -o-linear-gradient(top,
#fff, 0%, #bcbcbc, 100%);
background: -ms-linear-gradient(top,
#fff, 0%, #bcbcbc, 100%);
background: linear-gradient(top, #fff,
0%, #bcbcbc, 100%);
}
ul.thumbs li a:hover span:before {
width: 0px;
height: 0px;
border-bottom: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: '';
position: absolute;
top: -5px;
left: 44px;
}
ul.thumbs li:first-child a:hover span {
left: -3px; }
ul.thumbs li:first-child a:hover
span:before { left: 25px; }
/* Animation for slider */
@-webkit-keyframes 'slide' {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
ul.slides li:target {
z-index: 100;
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* not target */
@-webkit-keyframes 'noTarget' {
0% {
z-index: 75;
}
100% {
z-index: 75;
}
}
ul.slides li:not(:target) {
-webkit-animation-name: noTarget;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
</style>
</head>
<body>
<div id="container">
<h1>CSS3 Keyframes Slider
Demo</h1>
<ul class="thumbs">
<li><a href="#slide-1"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb1.jpg"><span>This is image 1</span></a></li>
<li><a href="#slide-2"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb2.jpg"><span>This is image 2</span></a></li>
<li><a href="#slide-3"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb3.jpg"><span>This is image 3</span></a></li>
<li><a href="#slide-4"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb4.jpg"><span>This is image 4</span></a></li>
<li><a href="#slide-5"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb5.jpg"><span>This is image 5</span></a></li>
<li><a href="#slide-6"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb6.jpg"><span>This is image 6</span></a></li>
<li><a href="#slide-7"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb7.jpg"><span>This is image 7</span></a></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide1.jpg"></li>
<li id="slide-2"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide2.jpg"></li>
<li id="slide-3"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide3.jpg"></li>
<li id="slide-4"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide4.jpg"></li>
<li id="slide-5"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide5.jpg"></li>
<li id="slide-6"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide6.jpg"></li>
<li id="slide-7"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide7.jpg"></li>
</ul>
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment