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

jCiderはレスポンシブに対応しているカルーセルプラグインです。設定など特に難しくはないと思います。
デモページにはテキストをスライドされています。
jcider.cssを読み込みます。
<link rel="stylesheet" href="jcider.css"/>
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>
どちらかの方法で書きます。
<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 |