CSS3 Fade slider

CSS3 Fade slider

24 220705
CSS3 Fade slider

CSS3 Fade slider

Today I would like to show you how to create nice and smooth css3 slider. It uses fade effect to switch between slides. Plus, you can use custom promo text for each slide. We will use basic UL-LI unordered list to make this slider. We don’t need to click anywhere to switch slides – everything is automatically (css3 animation).

Live Demo

[sociallocker]

download result

[/sociallocker]


So, lets start


Step 1. HTML

Html markup is very easy. There are four slides. Each slide consists of image (as background) and promo text in DIV. If you need – you always can add more slides here.

<div class="slides">
    <ul> <!-- slides -->
        <li><img src="images/pic1.jpg" alt="image01" />
            <div>Promo text #1</div>
        </li>
        <li><img src="images/pic2.jpg" alt="image02" />
            <div>Promo text #2</div>
        </li>
        <li><img src="images/pic3.jpg" alt="image03" />
            <div>Promo text #3</div>
        </li>
        <li><img src="images/pic4.jpg" alt="image04" />
            <div>Promo text #4</div>
        </li>
    </ul>
</div>

Step 2. CSS

Now, it’s time to define css styles for our slider. Here are styles for main slider element, inner slides and for promo titles:

/* fade slider */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

You can see that I use two css3 animations here: anim_slides and anim_titles. First one is for separated slides, second one – for promo texts. In order to switch between slides – we change opacity of slides. For titles – we change Left position and opacity too.


Live Demo

Conclusion

That is all for today. We have just created new cool pure CSS3-based slider with Fade effect. I hope that you like it. Good luck!

SIMILAR ARTICLES


24 COMMENTS

    • Hi Arseny,
      Opera is so rarely used browser so I didn’t make styles for this browser when I made this tutorial. Well, in order to do it for opera, try to add opera-vendor prefix to styles (-o)

  1. used your code which is great but I am using 18 images and when I added the images as described in the body of the html I had to add the .slides ul li:nth-child(5) – (18), even though the iteration count is set to infinite it gets to the last slide, fades back to the 17th slide for a second and sits on the last one again, the code does not seem to loop back to the start of the images. Have also tried setting the iteration count to a number but still same result, running latest firefox (17) with all -moz- tags in place… Any ideas?

    • Hello Les, please pay attention to animation keyframes, right now it is adjusted to work only with 4 images. Try to imagine full cycle. There are 4 sectors (for every image). Every slide should be visible 25 (100 / 4) percentages of whole cycle, in case of 18 images it should be ~ 5%. So, every step – in the beginning (0%) we should keep it invisible (opacity = 0), then during next 6 percentages we can increase opacity smoothly to 1. After, keep it (opacity: 1) until 24%, And finally – we change opacity smoothly for next 1% period. Finally, we keep it (transparent) for next 3/4 of whole cycle.
      In your case, you can make it visible due 1% (of 5 total percentages), then you can keep it visible till 4%, and finally, during 0.5 – 1.0% you can decrease opacity to zero.

  2. Hi,

    I am interested in installing a fade type slider on my website and came across yours while browsing/searching. I unfortunately have I.E. 9 however I would also suspect most clients are now using I.E. 9 or higher anyway.

    Is there a way to get this Slider program to work or do you have a reference to another solution?

    Many Thanks,

    Scott

    • Hello Scott,
      As I answered before, IE9 doesn’t support keyframe animations. If you need to support IE9, you should search for JS-based solutions.

  3. Great code. Could you please detail the changes in code using 7 images? 7 images equals 42 seconds total animation duration, am I right? Right, I am confused on transforming the percentages as you’ve mentioned before. Could you please detail it? Thanks, i want to put the code in my web page, avoiding the use of javascript modules. Nice!!

    • Hi Javier,
      Yes, in case of 7 images – it is 42 seconds duration (6 seconds for every image).
      After, you will need to add delays. please pay attention to lines 120-131
      There are delays for elements 2, 3 and 4. You will need to add more delays here.
      Finally, you will need to change keyframes. Right now my logic is: opacity 0 in the beginning, after – fast switch to opacity = 1 on 5-6%, then, keep this opacity (1) till ~20%, then we can switch back to 0 (during ~5%). and all next time we can keep opacity = 0.
      As you see, whole distance is separated with 4 main segments (for 4 images).

  4. hello sir i use this slider,but when i minimize the page slider timing can disturb…..what can i do for this……

    • Hello Kami,
      You should keep in mind, that there are few timers, not a single. More, there is a timer for sliding hints too. If you want to change it, you should change all of them

  5. Hi,
    I found a little/big problem…when I change tab and then I come back on the tab where there is your slider, I see that it’s not working properly anymore: in particular, I see that the fade is not regular and between an image and another there is a few time in which is all white. Moreover, letting it going on, the images fades too fast, so that I can’t see some images.
    I’ve tested it from Chrome on Windows.
    Can you help me to correct this bug?
    Thank you

    • Hello Paolo,
      It shouldn’t be so, because it even doesn’t use JS code (which could be paused on inactive tabs), everything is made with pure CSS3

  6. So i’m looking at the code and it’s not making sense. I have one image to add. I changed the total time to 30s at 6s per slide, when I make the addition in the HTML of the new slide, it starts to animate with the first slide and becomes broken.

    I’ve read each of these comments, reread them, and tried again to make changes on the timer percentages, but I don’t know where to look, or what to exactly change, it’s a little too deep.

    You should add a section walk-through for adding additional slides.

    • Hi Jake,
      The following sections should be customized in case if you need to add more images:
      keyframes anim_slides, keyframes anim_titles, .slides ul li (animation-duration), .slides ul li div (animation-duration) and delays for additional slides.

  7. hi thank you for your tutorial is very well done
    but I am a beginner and I need help
    how to add more than 20 picture
    you just help me change the percentage
    thank !!!!!

    • Hi Ibrabiga,
      I already explained how to calculate percentages in detail, if you don’t have enough time for this work, you may think about hiring me to this customization work.

  8. Hye,

    Im using ur fade slider for a responsive website. Im planning to generate the css dynamically based on the number of images. Would you care to share some logic that i could use? and which code is mandatory? Im not using the div title, so i guess line 137 – 213 i no use right. Im not sure how does this percentage keyframes and delays work.

    Thank in advance.

    • Hi Snaq,
      Keyframes are the most important here, you can not omit it. Percentages, animation duration, delays – depend directly on the number of slides, you should keep it in mind.

  9. hai.. thx for the code.. but, i have some problem here.. the image slider just won’t fit on the “wrapper” that i made.. it’s about 100px to the left from the edge of wrapper.. how should i fix it? thx…

    • Hi Sakura,
      Please pay attention that ‘.slides’ has the ‘margin: 50px auto;’. So, this element is centered.

  10. Thanks, the CSS3 transitions don’t work in the latest version of Firefox. You need to remove the -moz- from each CSS3 animation statement.

    • Hi Fernando,
      Yes, you are right, in the last versions of FF we don’t need to use ‘-moz’ anymore. However, FF still supports these instructions.

Leave a Reply to Shaq Cancel reply