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>