A Pure CSS3 Cycling Slideshow

Advertisement

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation.

Sections of This Article

To get a solid sense of the process from beginning to end, below is an outline of the article. Please note that this effect will only work properly in modern browsers that support the CSS3 properties being used.

  1. Introduction1
    Learn basic concepts related to CSS3 transitions and keyframe animation.
  2. HTML markup2
    Create the HTML markup for the sliding images.
  3. CSS styles3
    Create the style sheet to display the slider.
  4. CSS3 keyframe animation4
    Add animation to the slider (we’ll explain the various processes happening here).
  5. Progress bar5
    Add a progress bar for our slider.
  6. Tooltip6
    Add a tooltip to display the title of the image.
  7. CSS3 transitions7
    Animate the tooltip using CSS3 transitions to make it appear to hover over the image.
  8. Pause and restart8
    Pause the slider and restart it on hover.
  9. Demo9
    Check out the slider in action.
  10. Conclusion10
    Final considerations.

Pure CSS3 Cycle Slider11
Screenshot of the pure CSS3 cycling slideshow12.

1. Introduction

To follow this tutorial, having a basic understanding of CSS, especially CSS3 transitions and keyframe animation, is important. Using this simple concept, we will see how to make a functional image slider.

Basic Concepts of CSS3 Transitions

Normally when you change a CSS value, the change is instant. Now, thanks to the transition property, we can easily animate from the old to new state.

We can use four transition properties:

  1. transition-property
    Defines the name(s) of the CSS properties to which the transitions should be applied.
  2. transition-duration
    Defines the duration over which the transitions should occur.
  3. transition-timing-function
    Determines how intermediate values of the transition are calculated. The effects from the timing function are commonly called easing functions.
  4. transition-delay
    Defines when the transition starts.

At the moment, CSS3 transitions are supported in Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ and IE 10. Because the technology is still relatively new, prefixes for browsers are required. So far, the syntax is exactly the same for each browser, with only a prefix change required. We will omit them in the snippets in this article, but please remember to include the prefixes in your code.

Let’s see how to apply a simple transition to a link:

a {
   color: #000;
   transition-property: color;
   transition-duration: 0.7s;
   transition-timing-function: ease-in;
   transition-delay: 0.3s;
}

a:hover {
   color: #fff;
}

When assigning an animation to an element, you can also use the shorthand:

a  {
   color: #000;
   transition: color 0.7s ease-in 0.3s;
}

a:hover {
   color: #fff;
}

The W3C has a list of all “Animatable Properties13.”

Basic Concepts of CSS3 Animations

CSS animation enables us to create animations without JavaScript by using a set of keyframes.

Unlike CSS transitions, keyframe animations are currently supported only in Webkit browsers and Firefox and soon in IE 10. Unsupported browsers will simply ignore your animation code.

The animation property has eight subproperties:

  1. animation-delay
    Defines when the animation starts.
  2. animation-direction
    Sets the animation to play in reverse on alternate cycles.
  3. animation-duration
    Defines the length of time an animation takes to complete one cycle.
  4. animation-iteration-count
    Defines the number of times an animation cycle should play before stopping.
  5. animation-name
    Specifies the name of the @keyframes rule.
  6. animation-play-state
    Determines whether an animation is running or paused.
  7. animation-timing-function
    Describes how an animation progresses over one cycle.
  8. animation-fill-mode
    Specifies how a CSS animation should apply styles to its target before and after executing.

Let’s see how to apply a simple animation to a div.

/* This is the element we are applying the animation to. */

div {
   animation-name: move;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0.5s;
   animation-iteration-count: 2;
   animation-direction: alternate;

   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-delay: 0.5s;
   -moz-animation-iteration-count: 2;
   -moz-animation-direction: alternate;

   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}

/* This is the animation code. */

@keyframes move {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100px);
   }
}

@-moz-keyframes move {
   from {
      -moz-transform: translateX(0);
   }
   to {
      -moz-transform: translateX(100px);
   }
}

@-webkit-keyframes move {
   from {
      -webkit-transform: translateX(0);
   }
   to {
      -webkit-transform: translateX(100px);
   }
}

But we can use the shorthand property to conveniently set all of the animation properties at once.

div {
   animation: move 1s ease-in-out 0.5s 2 alternate;
   -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
   -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}

Keyframes

Each keyframe describes how an animated element should render at a given point in the animation sequence. The keyframes take a percentage value to specify time: 0% is the start of the animation, while 100% is the end. You can optionally add keyframes for intermediate animations.

/* Animation from 0% to 100% */

@keyframes move {
   0% { transform: translateX(0); }
   100% { transform: translateX(100px); }
}

/* Animation with intermediate keyframes */

@keyframes move {
   0% { transform: translateX(0); }
   50% { transform: translateX(20px); }
   100% { transform: translateX(100px); }
}

The W3C has a lot of useful and detailed information on “CSS3 Animations14.”

Basic Structure of Our Slider

Now that we know how transitions and animation work, let’s see how to create our slider using only CSS3. This sketch shows how the animation should work:

Sketch animation slider function
How the animation slider functions

As you can see, the slider will be a container inside of which the images will be displayed.

The animation is very simple: the image follow a predefined path, animating the top property and changing the z-index and opacity properties when the image returns to its initial position.

Let’s dive right into the HTML markup to create the slider.

2. HTML Markup

The HTML markup is very simple; it’s all organized and SEO-friendly. Let’s see the full code first and then figure out in detail how everything works.

<div class="container">
   <div id="content-slider">
      <div id="slider">  <!-- Slider container -->
         <div id="mask">  <!-- Mask -->

         <ul>
         <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
         <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
         <div class="tooltip"> <h1>Cougar</h1> </div>
         </li>

         <li id="second" class="secondanimation">
         <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
         <div class="tooltip"> <h1>Lions</h1> </div>
         </li>

         <li id="third" class="thirdanimation">
         <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
         <div class="tooltip"> <h1>Snowalker</h1> </div>
         </li>

         <li id="fourth" class="fourthanimation">
         <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
         <div class="tooltip"> <h1>Howling</h1> </div>
         </li>

         <li id="fifth" class="fifthanimation">
         <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
         <div class="tooltip"> <h1>Sunbathing</h1> </div>
         </li>
         </ul>

         </div>  <!-- End Mask -->
         <div class="progress-bar"></div>  <!-- Progress Bar -->
      </div>  <!-- End Slider Container -->
   </div>
</div>
  1. div id="slider"
    This is the main container of the slider. It does not have a particular function, but we will need it to pause the animation.
  2. div id="mask"
    We will use this to hide everything that happens outside of the slider. In addition to hiding the content, the mask allows us to display the contents of the slider.
  3. li id="first" class="firstanimation"
    Every list item has an ID and a class. The ID displays the tooltip, and the class is tied to the animation that has to occur.
  4. div class="tooltip"
    This simply displays the title of the image. You can modify it to your needs; for example, by making it clickable and adding a short description.
  5. div class="progress-bar"
    This contains the function that shows the progress of the animation.

Now it’s time for the CSS file.

3. CSS Style

Let’s create the basic structure of the slider. It will have the same image size. The border property will be useful to create a frame around the image.

/* SLIDER STRUCTURE */

#slider {
   background: #000;
   border: 5px solid #eaeaea;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 320px;
   width: 680px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
}

The mask class will hide all of the elements that lie outside of the slider; its height must be equal to the height of the slider.

/* HIDE ALL OUTSIDE OF THE SLIDER */

#mask {
   overflow: hidden;
   height: 320px;
}

Finally, to sort the list of images, we’ll have position: absolute and top: -325px so that all of the images are positioned outside of the slider.

/* IMAGE LIST */

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li {
   width: 680px;  /* Width Image */
   height: 320px; /* Height Image */
   position: absolute;
   top: -325px; /* Original Position - Outside of the Slider */
   list-style: none;
}

With these few lines of code, we have created our slider. Now we just need to add the animation.

4. CSS3 Keyframes Animation

Slider Animation
Image animation for the slider

Before we begin with the animation, we have to specify some parameters in order to get the right view of the animation.

As we know, the total duration of the animation will be 25 seconds, but we have to know how many keyframes equals 1 second.

So, let’s work out a series of operations that gives us the exact number of keyframes based on the images we have and the total duration of the animation. Here are the calculations:

  1. Define the total number of images to use in the slider
    5
  2. Define the length of animation for each image
    5 seconds
  3. Define the total duration of the animation
    Multiply the total number of images by the duration of each image:
    5 images × 5 seconds = 25 seconds
  4. Calculate how many keyframes equals one second
    Divide the total number of keyframes by the total duration of the animation.
    100 keyframes / 25 seconds = 4 keyframes
    4 keyframes = 1 second

With all of this math, we can now apply the CSS animation to the slider. We will be able to put the animation on infinite loop because each image will follow its own animation that activates once it comes up in the slider.

#slider li.firstanimation {
   animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
   animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;
}

Once the properties of the animation have been assigned, we need to use keyframes to set the animation in motion.

Following this principle, we can connect the animations to each other even though they are separate, which will give us an infinite loop.

I’ve added the opacity and z-index properties to make the transition from one image to the next more attractive.

As you can see in the code, the first animation has more keyframes than the rest. The reason for this is that when the gallery is started, the first image is positioned to make way for the second image; but when the last image has finished its animation, the first image has to have additional keyframes in order for the user not to see a break between animation cycles.

Here is all of the code for the animations:

/* ANIMATION */

@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Original Position */
   16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}

Having created the animations, we have to add a progress bar to display the duration of each animation.

5. Progress Bar

Progress bar Animation for each image
The progress bar for each animation

The process of animating the progress bar is the same as it was for the slider. First, we create the progress bar itself:

/* PROGRESS BAR */

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: #000;
   animation: fullexpand 25s ease-out infinite;
}

Don’t be afraid of the syntax here. It has the same function as from to; you can see that the keyframes set the appearance and disappearance of each image.

/* ANIMATION BAR */

@keyframes fullexpand {
   /* In these keyframes, the progress-bar is stationary */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* In these keyframes, the progress-bar starts to come alive */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* In these keyframes, the progress-bar moves forward for 3 seconds */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* In these keyframes, the progress-bar has finished his path */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* In these keyframes, the progress-bar will disappear and then resume the cycle */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

6. Tooltip

The slider is more or less complete, but let’s add a few details to make it more functional. We’ll insert tooltips for the image titles that will be visible on hover.

Simple Tooltip on image
Simple tooltip

Here is the CSS for the tooltips:

#slider .tooltip {
   background: rgba(0,0,0,0.7);
   width: 300px;
   height: 60px;
   position: relative;
   bottom: 75px;
   left: -320px;
}

#slider .tooltip h1 {
   color: #fff;
   font-size: 24px;
   font-weight: 300;
   line-height: 60px;
   padding: 0 0 0 10px;
}

Here we’ve made only the image titles visible, but you can do the same to custom text, links or whatever you like.

7. CSS3 Transitions

Tooltip Animation
Animate the tooltip on hover

We have seen how to apply CSS3 transitions to elements; now let’s do it to the tooltips.

If you remember, we added an ID to each list (first, second, etc.) to have only the tooltip associated with an image appear on hover, rather than all of the tooltips appear together.

#slider .tooltip {
…
   transition: all 0.3s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
   left: 0px;
}

8. Pause And Restart

Stop slider on mouse hover
Stop slider on mouse hover

To allow users to pause to read content or look at an image, we should stop the animation when they hover over an image. (We’ll also have to stop the animation of the progress bar.)

#slider: hover li,
#slider: hover .progress-bar {
   animation-play-state: paused;
}

9. Demo

Finally, we’ve reached the end of the tutorial. The slider is now 100% complete!

Pure CSS3 Cycle Slider15
Pure CSS3 cycling slider demo

Check out the demo16. It works in Firefox 5+, Safari 4+ and Google Chrome, as well as the iPhone and iPad. You can also download the ZIP file17.

Thanks to Massimo Righi18 for his images.

10. Conclusion

The effect is impressive, but admittedly, this slider is not very versatile. For instance, to add more images, you have to edit all of keyframes. CSS3 has great potential, but it does have limits, and sometimes JavaScript is preferable, depending on your target users.

This slider has some interesting features, such as pausing on hover and uniques link for the images, which allow users to interact with the slider. If you want full support among browsers, this is not possible, so JavaScript is recommended. Unfortunately, CSS3 animation has many limitations; its lack of flexibility in particular will prevent its widespread use for now. Hopefully this will spur you on to further study of CSS3.

Feel free to share your thoughts in the comments section below!

(al) (il)

Footnotes

  1. 1 #1
  2. 2 #2
  3. 3 #3
  4. 4 #4
  5. 5 #5
  6. 6 #6
  7. 7 #7
  8. 8 #8
  9. 9 #9
  10. 10 #10
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/12/final-slider.jpg
  12. 12 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
  13. 13 http://www.w3.org/TR/css3-transitions/#properties-from-css-
  14. 14 http://www.w3.org/TR/css3-animations/
  15. 15 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
  16. 16 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
  17. 17 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/CSS3-Slider.zip
  18. 18 http://www.massimorighi.com

↑ Back to top Tweet itShare on Facebook

Alessio Atzeni, based in Rome, Italy, is a dedicated web designer and front-end developer with a passion for CSS3. He specializes in CSS and JavaScript web development, and building search engine friendly websites. For more front-end web development tutorials and CSS3 experiments, check out his web design blog. Follow him on Twitter @Bluxart, on Dribbble or add him on Google+.

Advertising
  1. 1

    The styles and code are useful in my learning of animation technics and need for my experiences in methods of programming to be able to enhance my learning, for what to use to be able to get different browsers to function as desired. Thank You for your explanations and code for creating thoughts to a better understanding.

    1
  2. 102

    1. In one of the comments above (Sept. 2013), Dhira said that we was able to implement manual control by using negative values for animation-delay. Has somebody done it, can we see a working example? This would be great news!

    2. Has somebody implemented the fallback for older browsers, with modernizr, as Alessio suggested?

    Thanks to all and have a great day!

    0
  3. 203

    Anyone can explain how to change the @keyframe cycle to 7 images?

    0
    • 304

      This is the fallback of this particular method, it is not simple to add or remove images. Look at my explanation above for more detail. Basically, you have to rewrite all of the timings for the keyframes, adjust what some of the keyframes do, and (because you’re adding a significant amount of images) you will need to increase the amount of time the animations take. For practicality purposes, you would be better off finding a good JS slide-show.

      0
  4. 405

    Hello—
    This is great. How could I add a link to each image, so if someone clicked on an image, they could browse to another page?
    Thanks.

    0
    • 506

      In the HTML you will see that all of the img tags are already contained by a tags. Simply replace the ‘#’ with your desired URL.

      0
  5. 607

    Well, this is a bummer. It doesn’t work for me. I’ve even made some sample images and uploaded them and they don’t show up either. Dang, I was so hopeful.

    0
  6. 708

    phadindra bhandari

    April 1, 2014 6:00 am

    yes thank you very much it’s very helpful for me

    0
  7. 809

    Awesome tutorial, because of people like you we can all have happy CODING. Thanks

    2
  8. 910

    To make sure you can add multiple images you can make a php class to obtain the flexibility you need.
    You can make a constructor where you fill in the width, height, seconds to display image, seconds for transition, path to folder with images.

    You can easily compute the variables needed to write the code for the animation.css, style.css and the html code.

    Good luck! And thanks for sharing!!

    0
  9. 1011

    nice tutorial! but I’m kinda confused, i have read through it all and there is so many different sections of css needed and repeated, I’m not sure what to do! can someone please post the full css code, it would be much easier. thank you!!

    0
  10. 1112

    Hello All… Its a nice tutorial… With the help of this we came to know how to remove and add the images…This is done by our great mathematician Miss Gurleen Kaur…. Thanks Alot.. Great Tutorial…

    -1
  11. 1213

    Really great, thank you. BUT, can you say me pls, how can I reduce the number of slider to 3? I tried to delete the 4th and 5th slides from .ccs and .html files, but so I have an empty space at the end of the animation.

    2
  12. 1314

    Great slider but is it possible to add buttons for selected slides?

    1
  13. 1415

    This is a very amazing tutorial! I will be trying out some of it later. But on a side note, what must be changed to make the slider differently sized? I am planning to try and incorporate this somewhere in a project of mine… Thanks, WisdomFire.

    0
    • 1516

      wisdomfire, it is very easy to change the size of the slideshow for different purposes. All that really needs to be changed is the width and height for #slider, #slider li, and .progress-bar. Changing those values in those three CSS selectors should give you a differing size slideshow. Also, you may need to change the margin spacing throughout the code.

      0
  14. 1617

    Awesome website you have got right here.

    0
  15. 1718

    This technique is great! I’m implementing it on a site I am building now! One question though, anyone know how I could get the images in the slideshow to center?

    Some of my images are a little small for the size I have set, and I don’t want to set it lower thus losing the edges of my other pictures. I also want the site to display well in most resolutions. I have tried adding margin-left: auto; and margin-right: auto; onto the pictures, but this doesn’t seem to do anything. If anyone could help me out, I would really appreciate it!

    0
  16. 1819

    I adapted this for something I’m working on. All I changed was the dimensions since the images were a different size. The first image is halfway into the window, and stuck there. I tried a couple different browsers and experienced the same result. Would changing the dimensions cause the animation to stop, or is it more likely that I made a mistake somewhere else?

    0
  17. 2021

    Thank you Alessio,

    For some time I have wanted to have some slide shows on my web site, but I have not undertaken them because I didn’t want to do them in Javascript because too many people have it disabled.

    I am very new to CSS3 but your tutorial is making it easy to come up with a very usable slide show template for both my dronesarefun.com site and my wifes mccraystudios.com jewelry site.

    I still have much tweaking to do, but I already have it working very nicely in my own CSS page and my basic drones are fun blank template HTML page.

    Customizing it and making an Arachnophilia template for the HTML should be the fun part.

    Thank You again,

    Gary McCray

    1
  18. 2122

    Thank you for sharing your knowledge!
    Very kind of you!

    I found what I need but I’m having some troubles with the tooltip. The names of the pictures doesn’t show on my screen . I have windows 8.0 so I hope the IE isn’t the problem. Also, I can’t get this to work with crome.

    Any suggestions?

    0
    • 2223

      In “#slider li#first: hover .tooltip” remove the space inbetween “first:” and “hover” (write “first:hover”). Do the same for second, third, fourth and fifth and don’t forget to change it also in “#slider: hover li,
      #slider: hover .progress-bar”.
      For use with chrome add -webkit- to animation (-webkit-animation), keyframes (@-webkit-keyframes), transition (-webkit-transition) and animation-play-state (-webkit-animation-play-state).
      Had the same problems. ;-)

      0
  19. 2324

    Thanks for sharing,

    0
  20. 2425

    Works fine in I.E. and Firefox, but the same code in Chrome displays a frozen portion of an image on load and stays there. I even tried using prefixes. Any thoughts??

    0
  21. 2526

    Nice Tutorial. But personally I think JQuery can be used to achieve the same goal with less line of codes. Still, it’s always good to have tutorial like this.

    0
  22. 2627

    I’m using Dreamweaver CS6 and it does not work there!

    -1
  23. 2728

    ບູນທອນ ຊະນະສີນ

    October 18, 2014 3:09 am

    I have Dreamweaver but never use them and I only use TeraPad for edit my work and hope to use them if I have to do more pages.

    -1
  24. 2829

    Thank You So Much for The Tutorials, but I’ve Got a Question:
    How Can I Make it Somehow Responsive?
    (When I Tried to Change the Sizes into % the Images Didn’t Work Properly.
    *PLEASE Help ME!

    -1
  25. 2930

    Thank you very much for this great tutorial! It was exactly what I was looking for with a very good explanation of all details. For use in firefox, chrome, ie, opera and safari I added -moz-, -webkit-, -o- and -ms- to
    animation (-xxx-animation, keyframes (@-xxx-keyframes), transition (-xxx-transition) and animation-play-state (-xxx-animation-play-state). It works in all current versions of these browsers. :-)
    Please remove the space inbetween “first:” and “hover” at the explanation for adding the tooltip. Then everything works fine.
    Kind regards

    -1
  26. 3031

    Many Thanks for share this ! I learning CSS and this is very useful

    -1
  27. 3132

    Hi..!

    Thank you for this great article. May I know how we get these images react responsively?

    Thank you.

    -1
  28. 3233

    Ramvignesh Pasupathy

    December 14, 2014 8:53 am

    Nice article. I tried to make one cycling slide show like this. To start off I used all the codes in this article. I don’t know what went wrong. Only the first image is visible in the cycle. And I’m sure the rest of the images aren’t broken. I have checked them. Can you please help me to resolve this? The following is my code.

    sample slider

    #slider {
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
    }

    #mask {
    overflow: hidden;
    height: 320px;
    }

    #slider ul {
    margin: 0;
    padding: 0;
    position: relative;
    }

    #slider li.firstanimation {
    animation: cycle 25s linear infinite;
    -o-animation: cycle 25s linear infinite;
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
    }

    #slider li.secondanimation {
    animation: cycletwo 25s linear infinite;
    -o-animation: cycletwo 25s linear infinite;
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
    }

    #slider li.thirdanimation {
    animation: cyclethree 25s linear infinite;
    -o-animation: cyclethree 25s linear infinite;
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
    }

    #slider li.fourthanimation {
    animation: cyclefour 25s linear infinite;
    -o-animation: cyclefour 25s linear infinite;
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
    }

    #slider li.fifthanimation {
    animation: cyclefive 25s linear infinite;
    -o-animation: cyclefive 25s linear infinite;
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
    }

    @keyframes cycle {
    0% { top: 0px; } /* When you start the slide, the first image is already visible */
    4% { top: 0px; } /* Original Position */
    16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
    20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
    21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
    100%{ top: 0px; opacity: 1; }
    }

    @keyframes cycletwo {
    0% { top: -325px; opacity: 0; } /* Original Position */
    16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
    36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
    40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
    41% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
    100%{ top: -325px; opacity: 0; z-index: -1; }
    }

    @keyframes cyclethree {
    0% { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
    }

    @keyframes cyclefour {
    0% { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
    }

    @keyframes cyclefive {
    0% { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
    }




    -1
  29. 3334

    I can get the slider box to resize with windows, but i cant get the image to resize with it. Can anyone help ?

    -1
  30. 3435

    It’s pretty nice. I like the progress bar and stop on hover thing but is there a way we can add Next and Prev option Just like an exmple here http://codeconvey.com/2014/01/23/pure-css-image-slider/ Thanks

    -1
  31. 3536

    Hi, how to set timings for 11 slides?
    Thanks!

    -1

↑ Back to top