A slider is possible using javascript but here in this blog we are using the pure css3 code for making transition to the images that is used in a slider. This is known as a magic of keyframe. CSS3 animation make it possible to animate transition by using keyframe, Basically it includes two components
1) A set of keyframes that includes the start and end time.
2) A style describing the CSS3 animation including HTML for describing the image and its caption.
CSS3 Keyframe animation includes the timing function:-
@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%; }
}
It adds animation to the slider, when we assign transition property to it and connect animation to each image. The first image is set at {left : 0%}, so its start from the left and then it will be same at 20%, when it reaches at 25% the image will move like this that it is a slider back to back images will float on the screen and giving effects like a slider.
Following are the complete source code that will be helpful in understanding the concept of css3 slider.
<!DOCTYPE HTML>
<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,figure {
margin: 0;
background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0; animation: 20s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
}
</style>
</head>
<body>
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wanaka-drowned-tree.jpg" alt>
<figcaption>Wanaka, New Zealand</figcaption>
</figure>
<figure>
<img src="http://www.indiatraveltours.com/images/the-taj-mahal.jpg" alt>
<figcaption>Tajmahal, India</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/utah-peak.jpg" alt>
<figcaption>Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bryce-canyon-utah.jpg" alt>
<figcaption>Bryce Canyon, Utah, United States</figcaption>
</figure>
</figure>
</div>
</body>
</html>
0 Comment(s)