Its a simple and easy to customizable HTML slideshow which builds without any Javascript. You don’t need any jQuery code, all you need plain HTML and CSS code.
The slider comes with arrow navigations which allow sliding the next image and you can easily add more images in the slider by just customize the HTML code.
You can free download this slider and also see the demo to see how it look like. It doesn’t have too many options as any other Javascript slider has but it loads faster than any other Js slideshow.
Create & Implement Clickable Slideshow with HTML
After downloading the source code. You will find two CSS files. The first one is demo.css which you don’t need to add because we use it to build demo layout.
The second file style.css what you need to add to your web page.
<link rel="stylesheet" href="style.css" />
The HTM is simple and easy to understand. We will simply use the unordered list of HTML. We also wrap the unordered list within the div class name slider.
Each li is defined a class slide but also has an IDs which is unique to all li.
<div class="slider">
<ul>
<li id="no-js-slider-1" class="slide">
<img src="https://lh3.googleusercontent.com/-PcDDGh9C6Uk/UUoRYu8TmGI/AAAAAAAAADk/bVCVnUEott4/s1231/2.jpeg.jpg">
<a class="prev" href="#no-js-slider-10">prev</a>
<a class="next" href="#no-js-slider-2">next</a>
</li>
<li id="no-js-slider-2" class="slide">
<img src="https://lh5.googleusercontent.com/-ImESS5vXwTQ/UUoRZtDDdwI/AAAAAAAAAD0/mBlvPxXMuDU/s1231/3.jpeg.jpg">
<a class="prev" href="#no-js-slider-1">prev</a>
<a class="next" href="#no-js-slider-3">next</a>
</li>
<li id="no-js-slider-3" class="slide">
<img src="https://lh3.googleusercontent.com/-a4HykmTjnLw/UUoRZ9AOzNI/AAAAAAAAAD8/bsVqg8naI2o/s1231/4.jpeg.jpg">
<a class="prev" href="#no-js-slider-2">prev</a>
<a class="next" href="#no-js-slider-4">next</a>
</li>
<li id="no-js-slider-4" class="slide">
<img src="https://lh5.googleusercontent.com/-lmIWz4ADxc0/UUoRaFjdNXI/AAAAAAAAAEI/widPZMMiBVM/s1231/5.jpeg.jpg">
<a class="prev" href="#no-js-slider-3">prev</a>
<a class="next" href="#no-js-slider-5">next</a>
</li>
<li id="no-js-slider-5" class="slide">
<img src="https://lh3.googleusercontent.com/-ZbMYEV9F1Bc/UUoRajU3qmI/AAAAAAAAAEE/Y8nB8gecGgU/s1000/6.jpeg.jpg">
<a class="prev" href="#no-js-slider-4">prev</a>
<a class="next" href="#no-js-slider-6">next</a>
</li>
<li id="no-js-slider-6" class="slide">
<img src="https://lh6.googleusercontent.com/-88kTocv470A/UUoRbG0sNgI/AAAAAAAAAEU/XNupHrK1pvE/s1231/7.jpeg.jpg">
<a class="prev" href="#no-js-slider-5">prev</a>
<a class="next" href="#no-js-slider-7">next</a>
</li>
<li id="no-js-slider-7" class="slide">
<img src="https://lh3.googleusercontent.com/-O_0Ce7JxwJo/UUoRbZ6g4HI/AAAAAAAAAEc/O0mmZ0t0U88/s1231/8.jpeg.jpg">
<a class="prev" href="#no-js-slider-6">prev</a>
<a class="next" href="#no-js-slider-8">next</a>
</li>
<li id="no-js-slider-8" class="slide">
<img src="https://lh6.googleusercontent.com/-w7N6XM1WsqY/UUoRbRFPCeI/AAAAAAAAAEg/u3KB5ykIk9g/s1231/9.jpeg.jpg">
<a class="prev" href="#no-js-slider-7">prev</a>
<a class="next" href="#no-js-slider-9">next</a>
</li>
<li id="no-js-slider-9" class="slide">
<img src="https://lh6.googleusercontent.com/-7Rf9aSkpphc/UUoRYyoTOWI/AAAAAAAAADw/WRl-jV1fISc/s1000/10.jpeg.jpg">
<a class="prev" href="#no-js-slider-8">prev</a>
<a class="next" href="#no-js-slider-10">next</a>
</li>
<li id="no-js-slider-10" class="slide">
<img src="https://lh6.googleusercontent.com/-UH8Tl-EG78c/UUoRYmvOWoI/AAAAAAAAADg/EIT1YomfqBo/s1231/1.jpeg.jpg">
<a class="prev" href="#no-js-slider-9">prev</a>
<a class="next" href="#no-js-slider-1">next</a>
</li>
</ul>
</div>Let’s have a look at the complete CSS.
* {
margin: 0;
padding: 0;
list-style-type:none;
}
.thumb {
height:140px;
width:210px;
top:136px;
left:12px;
position:relative;
background-size:contain;
box-shadow:-12px 0 0 12px #000;
}
.thumb:last-of-type {
box-shadow:0 0 0 12px #000;
}
.thumb:after {
content:attr(title);
font:normal normal 20pt 'impact';
position:relative;
}
.thumb:hover {
-webkit-filter: grayscale(80%);
-moz-filter: grayscale(80%);
-ms-filter: grayscale(80%);
-o-filter: grayscale(80%);
filter: grayscale(80%);
filter: url(grayscale.svg#greyscale);
filter: gray;
}
@-webkit-keyframes TMNT {
0% { left: 0px; }
100% { left: -1200px; }
}
a.prev,a.next {
height:91px;
position:absolute;
width:43px;
top:50%;
margin-top:-30px;
opacity:0.6;
text-indent:-99999px;
cursor:pointer;
-webkit-transition:opacity 200ms ease-out;
}
a.prev:hover,a.next:hover {
opacity:1;
}
.prev {
left:0;
background: #000 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
}
.next {
right:0;
background: #000 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
}
.slider {
height:100vh;
position: relative;
}
.slide {
position:absolute;
height:100%;
width:100%;
}
.slider .slide:target {
z-index: 100;
}
img {
max-width:100%;
width:100%;
position:fixed;
left:0;
}That’s It.