Add Stylish And Simple Pure CSS Thumbnail Manual Slider

There are many simple slider available over internet but here we have the simplest Pure CSS Thumbnail Manual Slider that even doesn’t need too much CSS or CSS3 becasue its all based of basic CSS.

Now check out our slider below and Add Stylish And Simple Pure CSS Thumbnail Manual Slider on your blog or web to slide basic things like images or text od DIV on user desire. Have a look on live DEMO then garb the code from below.

Features:

1.) No JQuery File Added.
2.) No JavaScript CodeAdded.
3.) Little CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style type="text/css">
#scrolly{width:800px;height:200px;overflow:auto;overflow-y:hidden; auto;white-space:nowrap}
img{margin:00px 5px;display:inline;width:200px;}
#scrolly::-webkit-scrollbar {
width: 500px;
}
#scrolly::-webkit-scrollbar-button:start:decrement {
background: url(https://img.prntscr.com/img?url=http://i.imgur.com/aTmM8wy.png) ;
width:80px;
}

#scrolly::-webkit-scrollbar-button:end:increment {
background: url(https://img.prntscr.com/img?url=http://i.imgur.com/fNLHCis.png) ;
width:80px;
}
#scrolly::-webkit-scrollbar-track {
display:none;
}

#scrolly::-webkit-scrollbar-thumb {
background: url(https://www.shelflife.net/images/loading_animation.gif) ;
display:none;
}

</style>

HTML:

<div id='scrolly'>
<a href="###"><img src="/image1-big.jpg" alt=""></a>
<a href="###"><img src="/image2-big.jpg" alt=""></a>
<a href="###"><img src="/image3-big.jpg" alt=""></a>
<a href="###"><img src="/image4-big.jpg" alt=""></a>
<a href="###"><img src="/image1-big.jpg" alt=""></a>
<a href="###"><img src="/image2-big.jpg" alt=""></a>
<a href="###"><img src="/image3-big.jpg" alt=""></a>
<a href="###"><img src="/image4-big.jpg" alt=""></a>
<a href="###"><img src="/image1-big.jpg" alt=""></a>
<a href="###"><img src="/image2-big.jpg" alt=""></a>
<a href="###"><img src="/image3-big.jpg" alt=""></a>
</div>

Customization:

1.) You can change the JavaScript and CSS if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…