Pure CSS Image Slider With Thumbnails

Are you looking for pure CSS image slider which change the main photo when clicking on thumbnails? This is a simple thumbnail carousel which builds with CSS only. No need to add Javascript or Jquery and its easy to customize it.

The CSS3 thumbnail slider switches the main slider photos by clicking on thumbs. It functions and works similar to any kind of Js slider. It is lightweight and works well on all major browsers. The slider also comes with thumb caption when hovering the thumbnails photos.

It is a simple slider with thumbnails that provide a clean interface. You can easily move the position of thumbnails from top to bottom. The markup is also simple and easy to understand which allow you to quickly customize it.

How to Use Thumbnails Photo Slider on Webpage

You may be surprised that it’s superbly easy to implement on any type of website. All you need to add the style.css file into a head of your webpage.

<link rel="stylesheet" href="style.css">

The HTML also so easy to understand. You simply need to define a container where you will add rest of HTML. For both thumbs and main slider photo, you need to define un-order list and then place image tag inside it.

<div id="container">
<ul class="thumbs">
    <li><a href="#slide-1"><img src="img/image_1.jpg" /><span>This is image 1</span></a></li>
    <li><a href="#slide-2"><img src="img/image_2.jpg" /><span>This is image 2</span></a></li>
    <li><a href="#slide-3"><img src="img/image_3.jpg" /><span>This is image 3</span></a></li>
    <li><a href="#slide-4"><img src="img/image_4.jpg" /><span>This is image 4</span></a></li>
    <li><a href="#slide-5"><img src="img/image_5.jpg" /><span>This is image 5</span></a></li>
</ul>
<ul class="slide">
    <li class="first" id="slide-1"><img src="img/image_1.jpg" alt="" /></li>
    <li id="slide-2"><img src="img/image_2.jpg" alt="" /></li>
    <li id="slide-3"><img src="img/image_3.jpg" alt="" /></li>
    <li id="slide-4"><img src="img/image_4.jpg" alt="" /></li>
    <li id="slide-5"><img src="img/image_5.jpg" alt="" /></li>
</ul>
</div>

That’s it all you need to do. Hope you enjoy and if you like it, please share it.