Pure CSS Slider Responsive using Sheet Slider

gravatar
CSS 2/3, Sheet Slider
Snippet by Anon
805 0
<!--Sheet Slider-->
<div class="sheetSlider sh-default sh-auto">
   <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"/> 
   <div class="sh__content">

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img01.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>Artwork surreal</h4>
            <span>Secondary text without link</span>
         </div>
      </div>

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img02.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>2 Weeks</h4>
            <span>Secondary text <a href="#urlPage">with link</a></span>
         </div>
      </div>

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img03.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>Cat under a carpet</h4>
            <span>Secondary text without link</span>
         </div>
      </div>

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img04.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>Sheet</h4>
            <span>Secondary text without link</span>
         </div>
      </div>

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img05.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>Cute girl and cat</h4>
            <span>Secondary text without link</span>
         </div>
      </div>
      
   </div><!-- .sh__content -->

   <!--botones -->
   <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><!-- .sh__btns -->

   <!--flechas-->
   <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><!-- .sh__arrows -->
   
   <!--Control-->
   <button class="sh-control"></button>  
</div><!-- .sheetSlider -->