【CSS】CSSのみで実装。レスポンシブスライダー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ライセンス

 
SheetSlider

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

  • LATEST
  • RELATED
  • POPULAR