Pure CSS Responsive Image Slider

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

It is a simple and fully responsive pure CSS image slider which works well with small, medium and large desktop devices. The slider is built with CSS3 techniques and work well on all modern web and mobile browsers.

The slider is quite easy to implement on any kind of website. All you have to include the require CSS files and step up HTML code.

It is an animated slideshow which helps you to present images as a creative gallery. You don’t need to rely on Javascript and get the required functions in this HTML/CSS slider

How to Add Responsive Photo Slider

You simply need to download and include the core stylesheet sheet-slider.min.css in HTML document.

<link rel="stylesheet" href="sheet-slider.css">

Different Color Scheme CSS Classes

It also provides you a different color scheme so you can add your chosen color scheme by adding the stylesheet.

  • amber.css
  • blue- grey.css
  • blue.css
  • cyan.css
  • deep-purple.css
  • grey.css
  • indigo.css
  • light-blue.css
  • light-green.css
  • pink.css
  • purple.css

The HTML is simple and easy to understand. To add two slider images, you need to add the following code.

<div class="sheetSlider sh-default">
   <input id="s1" type="radio" name="slide1" checked/> 
   <input id="s2" type="radio" name="slide1"/>
   <div class="sh__content">
      <div class="sh__item"><img src="img/img01.jpg"/></div>
      <div class="sh__item"><img src="img/img02.jpg"/></div>
   </div>
   <div class="sh__arrows">
      <label for="s1"></label>
      <label for="s2"></label>
   </div>
</div>

You May Also Like

Leave a Comment

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