jQuery

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

September 13, 2015

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