Pure CSS Slider with Bullets and Arrows

Any web element builds with pure CSS clear means the fastest site loading speed and awesome user experience. I personally love to do experiment with CSS. It is always a great idea to create something which only possible with Javascript.

Today, I will show you how you can create a pure CSS slider for images with bullets and arrows. It is a simple and basic slider which is perfect for your personal website.

Moreover, It is mobile friendly slider and works well with tablet and smartphones. With the help of CSS, You can easily customize it and resize it by simply adding the HTML code inside the smaller container.

Another good thing, You can implement it on any kind of website or framework. If you already building your website and want to add it, You can easily do that by copy and paste the source code.

How to Build Pure CSS Slider with Bullets and Arrows

To load the CSS slider on your website or webpage, You need to add the style.css file into your HTML document to make work.

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

To create the image slider you need to define a container and place all the code inside it.

<div class="container">
    ........
</div>

Let’s take a look at the markup for creating arrow navigation for the slider.

  <input type="radio" id="i1" name="images" checked />
  <input type="radio" id="i2" name="images" />
  <input type="radio" id="i3" name="images" />
  <input type="radio" id="i4" name="images" />
  <input type="radio" id="i5" name="images" />

Next, we will define each image and for this, We will create a separate div with a unique ID.

  <div class="slide_img" id="one"> 
  	<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
    <label class="prev" for="i5"><span>&#x2039;</span></label>
    <label class="next" for="i2"><span>&#x203a;</span></label>
  </div>
  <div class="slide_img" id="two"> 
  	<img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " >
    <label class="prev" for="i1"><span>&#x2039;</span></label>
    <label class="next" for="i3"><span>&#x203a;</span></label>
  </div>
  <div class="slide_img" id="three"> 
  	<img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i2"><span>&#x2039;</span></label>
    <label class="next" for="i4"><span>&#x203a;</span></label>
  </div>
  <div class="slide_img" id="four"> 
  	<img src="http://wallpaperswide.com/download/big_hero_6_baymax-wallpaper-1152x720.jpg">
    <label class="prev" for="i3"><span>&#x2039;</span></label>
    <label class="next" for="i5"><span>&#x203a;</span></label>
  </div>
  <div class="slide_img" id="five"> 
  	<img src="http://www.wallpapereast.com/static/images/toys-wallpaper-hd-16339-17046-hd-wallpapers.jpg">
    <label class="prev" for="i4"><span>&#x2039;</span></label>
    <label class="next" for="i1"><span>&#x203a;</span></label>
  </div>

Finally, We will have dots navigation and we did create by using the following code.

<div id="nav_slide">
    <label for="i1" class="dots" id="dot1"></label>
    <label for="i2" class="dots" id="dot2"></label>
    <label for="i3" class="dots" id="dot3"></label>
    <label for="i4" class="dots" id="dot4"></label>
    <label for="i5" class="dots" id="dot5"></label>
</div>

That’s It. Your simple and nice looking slider ready to use. You can refer to demo and download source.