CSS

【CSS】CSSのみで実装。レスポンシブスライダーSheetSlider

May 26, 2016
SheetSlider

SheetSliderはCSSのみで実装されたレスポンシブ対応のスライダー。

インストール

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

マークアップ

<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"/>
   <ul>
      <li class="tab"><img src="img/slide-img01.jpg" /></li>
      <li class="tab"><img src="img/slide-img02.jpg"/></li>
      <li class="tab"><img src="img/slide-img03.jpg"/></li>
   </ul>
   <!--flechas-->
   <div class="sh-arrows">
      <label for="s1"></label>
      <label for="s2"></label>
      <label for="s3"></label>
   </div>
</div>

テーマ

カラー/テーマをCSSで変更

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

MITライセンス