Techumber
Home Blog Work

How To Create Slide Show With Pure CSS3

Published on October 2, 2012

Hi Friends. How are you? I started converting jquery plugins into css3. For example Image Zoom Effect With CSS3 is one of that kind. From now We will call these as CSS3-WIDGETS. So you can found new CSS3-WIDGETS in this blog. Now come to today’s tutorial How To Create Slide Show With Pure CSS3. We will create a simple slide show CSS3-WIDGET with the help of CSS3 properties. Have a look at the demo below so that you can under stand what we going to create.

Demo

Download

HTML Code

<ul>
  <li><img src="img/nemo.jpg" /></li>
  <li><img src="img/toystory.jpg" /></li>
  <li><img src="img/walle.jpg" /></li>
</ul>

This is simple html. Here we taking a under list with three list items. style.css

#slider {
  background: #000;
  border: 5px solid #eaeaea;
  height: 246px;
  width: 618px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  margin: 40px auto 0;
  overflow: hidden;
  position: relative;
}
#slider ul {
  margin: 0px;
  padding: 0px;
  position: relative;
}
#slider ul li {
  height: 246px;
  width: 618px;
  position: absolute;
  list-style: none;
  float: left;
}
#slider ul li:first-child {
  -webkit-animation: move1 10s linear infinite;
}
#slider ul li:nth-child(2) {
  -webkit-animation: move2 10s linear infinite;
}
#slider ul li:last-child {
  -webkit-animation: move3 10s linear infinite;
}
@-webkit-keyframes move1 {
  0% {
    left: 0px;
  }
  29% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  33% {
    left: 309px;
    opacity: 0;
    z-index: 0;
  }
  34% {
    left: -309px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    left: -309px;
    opacity: 0;
    z-index: 0;
  }
  99% {
    left: 0px;
    opacity: 1;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes move2 {
  0% {
    left: -309px;
    opacity: 0;
  }
  29% {
    left: -309px;
    opacity: 0;
  }
  33% {
    left: 0px;
    opacity: 1;
  }
  62% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  66% {
    left: 309px;
    opacity: 0;
    z-index: 0;
  }
  67% {
    left: -309px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    left: -309px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes move3 {
  0% {
    left: -309px;
    opacity: 0;
  }
  62% {
    left: -309px;
    opacity: 0;
  }
  66% {
    left: 0px;
    opacity: 1;
    z-index: 0;
  }
  94% {
    left: 0px;
    opacity: 1;
  }
  99% {
    left: 309px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    left: -309px;
    opacity: 0;
    z-index: -1;
  }
}

This code works only in -webkit- browsers like chrome,safari. If you want to use it in firfox just replace the -webkit with -moz-. Anyway the download and demo I included the complete code. We use CSS3 Animation properties to achieve the sliding effect. We use three keyframes for three list items. The keyframes maintaining different positions in different percentages. Understand Animation Here in animation properties we take the amimation-duration 10 seconds. So 100/10=10. 10% is one second. In keyframes we use these percents. If you observe move1 keyframe at 33% we applying left:309px at that same percent in move2 keyframes we are applying left:0px. That means pushing first image to right and pulling second image form left to center. Similarly In move2 keyframe at 66% we applying left:309px. at the same percent move3 keyframe we applying left:0px;. Means pushing second image form center to right and pulling third image form left to center. This process repeat infinitely. That’s it! Hope you like it. Please Share it with you friends and don’t forget to comment below.