Pure CSS Image Slider Free Download

Category: Slideshow | August 27, 2018
pure css image slider
Author: drygiel
Official Page: Go to Website
Last Update:August 22, 2019
License:MIT

Are you looking for a pure CSS image slider free to download? Here we have build one with the only CSS which work just like any kind of Javascript slider.

This slider designs with Pure CSS which allow rotating the images when user click on arrows. It is free to download and can be used for personal and as well as commercial projects.

The slider is mobile-friendly which allow creating wonderful CSS slider in just a few minutes. You don’t need to know about coding stuff. All you need to call CSS file in a web page and add a few lines of HTML code.

How to use it:

First of all, let’s add the main stylesheet file in the web document.

<link rel="stylesheet" href="csslider.css" />

Now you need to define the HTML and for this, you need to add the following HTML.

<div class="csslider">
     <input type="radio" name="slides" id="slides_1" checked />
     <input type="radio" name="slides" id="slides_2" />
     <input type="radio" name="slides" id="slides_3" />
     <input type="radio" name="slides" id="slides_4" />
     <input type="radio" name="slides" id="slides_N" />
     <ul>
         <li>Content of slide 1</li>
         <li>Content of slide 2</li>
         <li>Content of slide 3</li>
         <li>Content of slide 4</li>
         <li>Content of slide N</li>
     </ul>
     <div class="arrows">
         <label for="slides_1"></label>
         <label for="slides_2"></label>
         <label for="slides_3"></label>
         <label for="slides_4"></label>
         <label for="slides_N"></label>
         <label for="slides_1" class="goto-first"></label>
         <label for="slides_N" class="goto-last"></label>
     </div>
     <div class="navigation">
 	    <div>
         	<label for="slides_1"></label>
         	<label for="slides_2"></label>
         	<label for="slides_3"></label>
         	<label for="slides_4"></label>
         	<label for="slides_N"></label>
 	    </div>
     </div>
 </div>

The slider works well with images and also work for content. If you want to make it content slider then you simply need to replace the content with yours.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.