ritik soni css3 image slider

Image Slider Using CSS3 Key Frame Animation Without Jquery Plugins




In this tutorial we are going to create image slider with the help of  CSS3 Keyframe Animation



HTML

Html is preety simple we have a div with a class of `image-slider` then a section with class `slider` inside the section we have images with the class `image`

<html>
<head>
<title>Image Slider</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="image-slider">
<section class="slider">
<img class="image" src="img/slide-1.jpg">
<img class="image" src="img/slide-2.jpg">
<img class="image" src="img/slide-3.jpg">
<img class="image" src="img/slide-4.jpg">
<img class="image" src="img/slide-5.jpg">
<img class="image" src="img/slide-6.jpg">
<img class="image" src="img/slide-7.jpg">
</section>
</div>
</body>
</html>

CSS

basically we are changing the postion of the image on every keyframe which looks like images is sliding

.image{
position: absolute;
top: .1%;
left: .1%;
}
.image-slider{
width: 1000px;
height: 500px;
position: relative;
margin-left: -100px;
overflow: hidden;
background:url("../img/slide-8.jpg");
left: 20%;
border-radius: 10px;
}
section img{
position: absolute;
width: 1000px;
height: 500px;
margin-right: -200px;
}
section img:nth-of-type(7){
animation: slider 32s linear 4s infinite;
}
section img:nth-of-type(6){
animation: slider 32s linear 8s infinite;
}
section img:nth-of-type(5){
animation: slider 32s linear 12s infinite;
}
section img:nth-of-type(4){
animation: slider 32s linear 16s infinite;
}
section img:nth-of-type(3){
animation: slider 32s linear 20s infinite;
}
section img:nth-of-type(2){
animation: slider 32s linear 24s infinite;
}
section img:nth-of-type(1){
animation: slider 32s linear 28s infinite;
}
@keyframes slider{
0% {left: 0px;}
50% {left: -7000px;}
/*75% {left: 4000px;}*/
/* 100%{left: 3500px;}*/
}

9 thoughts to “Image Slider Using CSS3 Key Frame Animation Without Jquery Plugins”

  1. it is really good effort and great work, but jQuery transitions are really looks good, specially kenburs effect, and many others, so css cannot replace the jQuery…

    1. Glad you like the work. And i agree with you. css3 has its own place and jQuery too. I am big jQuery lover but for those who want a alternative I have created this tutorial

  2. Your style is really unique compared to other people I’ve read stuff from.
    I appreciate you for posting when you have the opportunity, Guess I’ll just book mark this
    site.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.