Responsive Image Carousel With Pure HTML / CSS – SheetSlider

Category: CSS & CSS3 , Recommended , Slider | July 31, 2018
Author: zkreations
Views Total: 4,163
Official Page: Go to website
Last Update: July 31, 2018
License: MIT

Preview:

Responsive Image Carousel With Pure HTML / CSS – SheetSlider

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.

You Might Be Interested In:


One thought on “Responsive Image Carousel With Pure HTML / CSS – SheetSlider

Leave a Reply