Home » Tutorials

How to Create a Pure CSS3 Slideshow

Tutorials
Author Reading 14 min Views 28 Published by Modified by

Today we will develop cool css3 slideshow (without any javascript). Slideshow will contain left and right navigation buttons, images, and tracker bar. We have to use left/right buttons or extra tracker bar to navigate through images.

Here are our final result:

CSS3 gallery result

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/slideshow.css
  5. Conclusion
Live Demo
download result

Ok, download the example files and lets start coding !

Step 1. HTML

Here are full html code of our slideshow.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>Pure CSS3 Slideshow | Script Tutorials</title>
06         <link href="css/layout.css" rel="stylesheet" type="text/css" />
07         <link href="css/slideshow.css" rel="stylesheet" type="text/css" />
08     </head>
09     <body>
10         <header>
11             <h2>Pure CSS3 Slideshow</h2>
12             <a href="https://www.script-tutorials.com/how-to-create-a-pure-css3-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
13         </header>
14         <div class="container" id="container">
15             <!-- caps, non-existent items -->
16             <span id="slide1" class="cap"></span>
17             <span id="slide2" class="cap"></span>
18             <span id="slide3" class="cap"></span>
19             <span id="slide4" class="cap"></span>
20             <span id="slide5" class="cap"></span>
21             <ul class="slider">
22                 <!-- left arrow -->
23                 <li class="lArrow">
24                     <a href="#slide5" class="a5"></a>
25                     <a href="#slide4" class="a4"></a>
26                     <a href="#slide3" class="a3"></a>
27                     <a href="#slide2" class="a2"></a>
28                     <a href="#slide1" class="a1"></a>
29                 </li>
30                 <!-- slides -->
31                 <li class="slides">
32                     <img src="images/0.jpg" alt="" class="g0" />
33                     <img src="images/1.jpg" alt="" class="g1" />
34                     <img src="images/2.jpg" alt="" class="g2" />
35                     <img src="images/3.jpg" alt="" class="g3" />
36                     <img src="images/4.jpg" alt="" class="g4" />
37                     <img src="images/5.jpg" alt="" class="g5" />
38                 </li>
39                 <!-- right arrow -->
40                 <li class="rArrow">
41                     <a href="#slide5" class="a5"></a>
42                     <a href="#slide4" class="a4"></a>
43                     <a href="#slide3" class="a3"></a>
44                     <a href="#slide2" class="a2"></a>
45                     <a href="#slide1" class="a1"></a>
46                 </li>
47                 <!-- tracker -->
48                 <li class="track">
49                     <a href="#slide1" class="tr1"></a>
50                     <a href="#slide2" class="tr2"></a>
51                     <a href="#slide3" class="tr3"></a>
52                     <a href="#slide4" class="tr4"></a>
53                     <a href="#slide5" class="tr5"></a>
54                 </li>
55             </ul>
56         </div>
57     </body>
58 </html>

Step 2. CSS

Now – all CSS styles

css/slideshow.css

001 span.cap {
002     display:none;
003 }
004 ul.slider {
005     margin:0 auto;
006     height:455px;
007     list-style:none;
008     position:relative;
009     width:706px;
010 }
011 ul.slider li {
012     float:left;
013     -moz-transition: 1s;
014     -ms-transition: 1s;
015     -o-transition: 1s;
016     -webkit-transition: 1s;
017     transition: 1s;
018 }
019 ul.slider li.slides {
020     border:1px solid #888;
021     height:453px;
022     overflow:hidden;
023     position:relative;
024     width:604px;
025     z-index:10;
026     -moz-transition: 1s;
027     -ms-transition: 1s;
028     -o-transition: 1s;
029     -webkit-transition: 1s;
030     transition: 1s;
031 }
032 ul.slider li.slides img {
033     display:block;
034     left:50%;
035     opacity:0;
036     position:absolute;
037     top:0;
038     -moz-transform: scale(0.5);
039     -ms-transform: scale(0.5);
040     -o-transform: scale(0.5);
041     -webkit-transform: scale(0.5);
042     transform: scale(0.5);
043     -moz-transition: 1s;
044     -ms-transition: 1s;
045     -o-transition: 1s;
046     -webkit-transition: 1s;
047     transition: 1s;
048 }
049 ul.slider li.slides img.g1,
050 ul.slider li.slides img.g2,
051 ul.slider li.slides img.g3,
052 ul.slider li.slides img.g4,
053 ul.slider li.slides img.g5 {
054     margin-left:-302px
055 }
056 ul.slider li.lArrow,
057 ul.slider li.rArrow {
058     background-color:#bbb;
059     border:2px solid #888;
060     height:451px;
061     position:relative;
062     width:48px;
063     z-index:5;
064 }
065 ul.slider li.lArrow {
066     border-radius:100px 0 0 100px;
067     border-width:2px 0 2px 2px;
068 }
069 ul.slider li.rArrow {
070     border-radius:0 100px 100px 0;
071     border-width:2px 2px 2px 0;
072 }
073 ul.slider li.lArrow a,
074 ul.slider li.rArrow a {
075     display:block;
076     height:100%;
077     left:0;
078     position:absolute;
079     top:0;
080     width:50px;
081 }
082 ul.slider li.lArrow:hover {
083     background-color:#eee;
084     left:2px;
085 }
086 ul.slider li.rArrow:hover {
087     background-color:#eee;
088     left:-2px;
089 }
090 ul.slider li.track {
091     background-color:rgba(255,255,255,0.3);
092     clear:left;
093     height:25px;
094     margin-left:51px;
095     margin-top:-25px;
096     position:relative;
097     text-align:center;
098     width:604px;
099     z-index:20;
100 }
101 ul.slider li.track a {
102     background-color:#fff;
103     display:inline-block;
104     height:15px;
105     margin:5px;
106     width:10px;
107     border-radius:5px;
108     -moz-box-shadow:2px 1px 1px #000000;
109     -ms-box-shadow:2px 1px 1px #000000;
110     -webkit-box-shadow:2px 1px 1px #000000);
111     -o-box-shadow:2px 1px 1px #000000;
112     box-shadow:2px 1px 1px #000000;
113 }
114 ul.slider li.track a:hover {
115     background-color:#0f0;
116 }
117 span#slide1:target ~ ul.slider li.slides .g1,
118 span#slide2:target ~ ul.slider li.slides .g2,
119 span#slide3:target ~ ul.slider li.slides .g3,
120 span#slide4:target ~ ul.slider li.slides .g4,
121 span#slide5:target ~ ul.slider li.slides .g5 {
122     opacity:1;
123     -moz-transform: scale(1);
124     -ms-transform: scale(1);
125     -o-transform: scale(1);
126     -webkit-transform: scale(1);
127     transform: scale(1);
128 }
129 ul.slider li.slides .g0 {
130     margin-left:-302px;
131     opacity:1;
132     -moz-transform: scale(1);
133     -ms-transform: scale(1);
134     -o-transform: scale(1);
135     -webkit-transform: scale(1);
136     transform: scale(1);
137 }
138 span#slide1:target ~ ul.slider li.slides .g0,
139 span#slide2:target ~ ul.slider li.slides .g0,
140 span#slide3:target ~ ul.slider li.slides .g0,
141 span#slide4:target ~ ul.slider li.slides .g0,
142 span#slide5:target ~ ul.slider li.slides .g0 {
143     opacity:0;
144     -moz-transform: scale(0);
145     -ms-transform: scale(0);
146     -o-transform: scale(0);
147     -webkit-transform: scale(0);
148     transform: scale(0);
149 }
150 span#slide1:target ~ ul.slider li.track .tr1,
151 span#slide2:target ~ ul.slider li.track .tr2,
152 span#slide3:target ~ ul.slider li.track .tr3,
153 span#slide4:target ~ ul.slider li.track .tr4,
154 span#slide5:target ~ ul.slider li.track .tr5 {
155     background-color:#f00;
156 }
157 span#slide1:target ~ ul.slider li.lArrow a,
158 span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
159 span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
160 span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}
161 span#slide2:target ~ ul.slider li.lArrow a,
162 span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
163 span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
164 span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}
165 span#slide3:target ~ ul.slider li.lArrow a,
166 span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
167 span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
168 span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}
169 span#slide4:target ~ ul.slider li.lArrow a,
170 span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
171 span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
172 span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}
173 span#slide5:target ~ ul.slider li.lArrow a,
174 span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
175 span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
176 span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

Styles of page layout (layout.css) is not included in article. But always available in package.

Live Demo
download result

Conclusion

Thats all, all was really easy, isn’t it? The result was great as usual. I hope that our nice tips help you. Good luck!

Rate article
© 2025 Script Tutorials