【jQuery】レスポンシブ対応カルーセルプラグインjCider

jCiderはレスポンシブに対応しているカルーセルプラグインです。設定など特に難しくはないと思います。
デモページにはテキストをスライドされています。

CSS

jcider.cssを読み込みます。

<link rel="stylesheet" href="jcider.css"/>

JS

jQuery本体とjcider.min.js、jquery.mobile.custom.min.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jcider.min.js"></script>
<script src="jquery.mobile.custom.min.js"></script>

HTMLマークアップ

どちらかの方法で書きます。

<div class="slider">
<ul>
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
</ul>
</div>
<div class="another-slider">
<div>
<div>First Slide</div>
<div>Second Slide</div>
<div>Third Slide</div>
</div>
</div>

オプション

yourWrapperElementHereにHTMLマークアップのclassを指定。上記であれば.sliderか.another-slider

$(document).ready(function(){
// Make sure to call jcider on the wrapper element
$('yourWrapperElementHere').jcider();
});
Setting Name Default
visibleSlides 1
fading false
easing ‘ease-in-out’
controls true
pagination true
transitionDuration 400
autoplay false
slideDuration 3000
 

【jQuery】レスポンシブ対応カルーセルプラグインjCider

  • LATEST
  • RELATED
  • POPULAR