Responsive Image Carousel With Pure HTML / CSS – SheetSlider

Preview:

Description:

SheetSlider is a CSS library used to generate a responsive, infinite-looping carousel slider from a list of images. Developed with pure CSS without any javascript.

How to use it:

Download and include the core style sheet sheet-slider.min.css in your html file.

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

Include a color scheme of your choice on the html file.

• 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

<link rel="stylesheet" href="dist/color/cyan.css">

Create a carousel slider with 5 images.

<div class="sheet-slider">
   <input id="s1" type="radio" name="slide1" checked/>
   <input id="s2" type="radio" name="slide1"/>
   <input id="s3" type="radio" name="slide1"/>
   <input id="s4" type="radio" name="slide1"/>
   <input id="s5" type="radio" name="slide1"/>
   <ul>
   <!--images-->
      <li class="tab">
         <img src="1.jpg" />
         <div>
            <h3>Slide 1</h3>
         </div>
      </li>
      
      <li class="tab">
         <img src="2.jpg"/>
         <div>
            <h3>Slide 2</h3>
         </div>
      </li>
      
      <li class="tab">
         <img src="3.jpg"/>
         <div>
            <h3>Slide 3</h3>
         </div>
      </li>
      
      <li class="tab">
         <img src="4.jpg"/>
         <div>
            <h3>Slide 4</h3>
         </div>
      </li>
      <li class="tab">
         <img src="5.jpg"/>
         <div>
            <h3>Slide 5</h3>
         </div>
      </li> 
   </ul>
   
   <!--pagination buttons-->
   <div class="sh-btns">
      <label for="s1"></label>
      <label for="s2"></label>
      <label for="s3"></label>
      <label for="s4"></label>
      <label for="s5"></label>
   </div>
   
   <!--navigation arrows-->
   <div class="sh-arrows">
      <label for="s1"></label>
      <label for="s2"></label>
      <label for="s3"></label>
      <label for="s4"></label>
      <label for="s5"></label>
   </div>
</div>

Change the default theme to dark. Just include the darken.css after you’ve loaded core style sheet.

<link rel="stylesheet" href="dist/theme/darken.css">

More CSS helps & modifiers.

• sh-21r9: 21:9
• sh-16r9: 16:9
• sh-4r3: 4:3
• sh-1r1: 1:1
• sh-default: horziontal
• sh-vertical: vertical
• sh-fade: fade animation

Changelog:

v2.2.0 (2018-07-31)

• Fixed automatic mode error when there are no arrows
• Option to activate or deactivate the “pause” when positioning the mouse on the slider
• Now the automatic mode starts when the resources have loaded
• New sh-flip animation available

v2.1.0 (2018-07-02)

• Added buttons (pause / play) in automatic mode.
• Improve responsive design.
• Added Aspect ratio options.