<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide1').shortslider();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide2').shortslider({
style : 'carousel'
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide3').shortslider({
style : 'fade'
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide4').shortslider({
rand : true
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide5').shortslider({
indicator : true,
PrevNext : true
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide6').shortslider({
style : 'fade',
speed : 10000
});
});
</script>
ウェブ制作の現場でありがちな機能をほぼ網羅したスライダーです。グレーの機能はまだ未実装で、実装予定です。これだけである程度の要件には耐えられるように設計しています。
使い方は簡単ですが、スライド要素に画像が含まれていない場合は少し使い方が特殊です。上のサンプルの「no image」を確認してください。
| itemDisplay |
default.itemDisplay
スライドのリスト( <ul>～</ul> )をWrapするクラス。特に問題が無ければ変更の必要はありません。 |
|---|---|
| style |
defaultnomal
|
| flick |
defaulttrue
スマートフォンやタブレットなどのタッチパネルデバイスでフリック操作を可能にします。 |
| 準備中 | |
| rand |
defaultfalse
ランダムにスライドを変更します。主にfade時の利用を想定していますが、nomal及びcarouselでも問題なくインジケータと同期して動作します。デフォルトはfalseです。 |
| hoverStop |
defaulttrue
マウスをスライド上に乗せている間、オートスライドをストップします。オプションのautoがfalseの時は何も起こりません。 |
| speed |
default5000
スライドが発生するタイミングです。ミリ秒単位で指定（5000なら5秒）。オプションのautoがfalseの時は無効です。 |
| auto |
defaulttrue
スライダーがオートでスライドします。 |
| indicator |
defaulttrue
インジケータを表示します。場所は、<div class="itemDisplay">～</div>の下に挿入されます。
例
|
| indicatorStyle |
defaulttrue
インジケータ用のCSSを挿入します。
例(.slide1に適用した場合)
|
| PrevNext |
defaulttrue
Prevボタン・Nextボタンを表示します。場所は、<div class="itemDisplay">～</div>及びインジケータの下に挿入されます。
HTML
|
| PrevNextStyle |
defaulttrue
Prevボタン・Nextボタン用のCSSを挿入します。
例(.slide1に適用した場合)
|
スライドさせたい要素をリスト化してdivでWrapし、任意のclass or IDを振ります。
jQueryの本体を読み込ませたあと、Wrapしたdivに対して.shortslider()します。
// スライドさせたい要素をリスト化してdivでWrapします。
<div class="slide1">
<ul>
<li><a href="XXX"><img src="/images/image1.jpg" alt=""></a></li>
<li><img src="/images/image2.jpg" alt=""></li>
<li><a href="XXX"><img src="/images/image3.jpg" alt=""></a></li>
<li><a href="XXX"><img src="/images/image4.jpg" alt=""></a></li>
<li><a href="XXX"><img src="/images/image5.jpg" alt=""></a></li>
</ul>
</div>
// jQueryの本体を読み込ませたあと、jquery.shortslider.jsを読み込ませ、スライダーの要素に対して.shortslider()します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$( function(){
$('.slide1').shortslider();
});
</script>
以下の例では、.slide7のmax-widthを400pxとしています。
またスライド1枚目に正方形の画像を設置しているので、この場合は表示領域も正方形になります。(.itemDisplayに背景色をつけてわかりやすくしています)
<div class="slide7">
<ul>
<li><img src="/images/test.jpg" alt=""></li> <!-- 縦横比1:1の画像 -->
<li><img src="/images/image2.jpg" alt=""></li>
<li><img src="/images/image3.jpg" alt=""></li>
<li><img src="/images/image4.jpg" alt=""></li>
<li><img src="/images/image5.jpg" alt=""></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.shortslider.js"></script>
<script>
$('.slide7').shortslider({
style : 'fade',
auto : false
});
</script>
<style type="text/css">
.slide7 { max-width:400px; margin:0 auto 15px;}
.slide7 .itemDisplay { background:#ccc}
.slide7 img { max-width:100%；}
</style>