Home » Tutorials

CSS3 Fade slider

Tutorials
Author Reading 8 min Views 3.9k. Published by Modified by

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).

Contents
  1. Step 1. HTML
  2. Step 2. CSS
  3. Conclusion
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.

01 <div class="slides">
02     <ul> <!-- slides -->
03         <li><img src="images/pic1.jpg" alt="image01" />
04             <div>Promo text #1</div>
05         </li>
06         <li><img src="images/pic2.jpg" alt="image02" />
07             <div>Promo text #2</div>
08         </li>
09         <li><img src="images/pic3.jpg" alt="image03" />
10             <div>Promo text #3</div>
11         </li>
12         <li><img src="images/pic4.jpg" alt="image04" />
13             <div>Promo text #4</div>
14         </li>
15     </ul>
16 </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:

001 /* fade slider */
002 .slides {
003     height:300px;
004     margin:50px auto;
005     overflow:hidden;
006     position:relative;
007     width:900px;
008 }
009 .slides ul {
010     list-style:none;
011     position:relative;
012 }
013 /* keyframes #anim_slides */
014 @-webkit-keyframes anim_slides {
015     0% {
016         opacity:0;
017     }
018     6% {
019         opacity:1;
020     }
021     24% {
022         opacity:1;
023     }
024     30% {
025         opacity:0;
026     }
027     100% {
028         opacity:0;
029     }
030 }
031 @-moz-keyframes anim_slides {
032     0% {
033         opacity:0;
034     }
035     6% {
036         opacity:1;
037     }
038     24% {
039         opacity:1;
040     }
041     30% {
042         opacity:0;
043     }
044     100% {
045         opacity:0;
046     }
047 }
048 .slides ul li {
049     opacity:0;
050     position:absolute;
051     top:0;
052     /* css3 animation */
053     -webkit-animation-name: anim_slides;
054     -webkit-animation-duration: 24.0s;
055     -webkit-animation-timing-function: linear;
056     -webkit-animation-iteration-count: infinite;
057     -webkit-animation-direction: normal;
058     -webkit-animation-delay: 0;
059     -webkit-animation-play-state: running;
060     -webkit-animation-fill-mode: forwards;
061     -moz-animation-name: anim_slides;
062     -moz-animation-duration: 24.0s;
063     -moz-animation-timing-function: linear;
064     -moz-animation-iteration-count: infinite;
065     -moz-animation-direction: normal;
066     -moz-animation-delay: 0;
067     -moz-animation-play-state: running;
068     -moz-animation-fill-mode: forwards;
069 }
070 /* css3 delays */
071 .slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
072     -webkit-animation-delay: 6.0s;
073     -moz-animation-delay: 6.0s;
074 }
075 .slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
076     -webkit-animation-delay: 12.0s;
077     -moz-animation-delay: 12.0s;
078 }
079 .slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
080     -webkit-animation-delay: 18.0s;
081     -moz-animation-delay: 18.0s;
082 }
083 .slides ul li img {
084     display:block;
085 }
086 /* keyframes #anim_titles */
087 @-webkit-keyframes anim_titles {
088     0% {
089         left:100%;
090         opacity:0;
091     }
092     5% {
093         left:10%;
094         opacity:1;
095     }
096     20% {
097         left:10%;
098         opacity:1;
099     }
100     25% {
101         left:100%;
102         opacity:0;
103     }
104     100% {
105         left:100%;
106         opacity:0;
107     }
108 }
109 @-moz-keyframes anim_titles {
110     0% {
111         left:100%;
112         opacity:0;
113     }
114     5% {
115         left:10%;
116         opacity:1;
117     }
118     20% {
119         left:10%;
120         opacity:1;
121     }
122     25% {
123         left:100%;
124         opacity:0;
125     }
126     100% {
127         left:100%;
128         opacity:0;
129     }
130 }
131 .slides ul li div {
132     background-color:#000000;
133     border-radius:10px 10px 10px 10px;
134     box-shadow:0 0 5px #FFFFFF inset;
135     color:#FFFFFF;
136     font-size:26px;
137     left:10%;
138     margin:0 auto;
139     padding:20px;
140     position:absolute;
141     top:50%;
142     width:200px;
143     /* css3 animation */
144     -webkit-animation-name: anim_titles;
145     -webkit-animation-duration: 24.0s;
146     -webkit-animation-timing-function: linear;
147     -webkit-animation-iteration-count: infinite;
148     -webkit-animation-direction: normal;
149     -webkit-animation-delay: 0;
150     -webkit-animation-play-state: running;
151     -webkit-animation-fill-mode: forwards;
152     -moz-animation-name: anim_titles;
153     -moz-animation-duration: 24.0s;
154     -moz-animation-timing-function: linear;
155     -moz-animation-iteration-count: infinite;
156     -moz-animation-direction: normal;
157     -moz-animation-delay: 0;
158     -moz-animation-play-state: running;
159     -moz-animation-fill-mode: forwards;
160 }

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!

Rate article
© 2026 Script Tutorials