• HOME
  • jQuery Short Slider [レスポンシブ対応] 軽量jQueryスライダープラグイン

jQuery Short Slider[レスポンシブ対応] 軽量jQueryスライダープラグイン

軽量で高機能なスライダー

ウェブ制作の現場でありがちな機能をほぼ網羅したスライダーです。グレーの機能はまだ未実装で、実装予定です。これだけである程度の要件には耐えられるように設計しています。
使い方は簡単ですが、スライド要素に画像が含まれていない場合は少し使い方が特殊です。下のサンプルの「no image」を確認してください。

nomal

JS

<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>

carousel

JS

<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>

fade

JS

<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>

random

JS

<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>

one slide only

JS

<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>

no image

  • HTMLのみのスライドについて

    HTMLを挿入することもできますが、縦横比が3:4固定となります。

    レスポンシブを軽量化するため、1つ目の<li>の中にある画像をcloneし<ul>の裏側に配置しています(不可視)。
    そして<ul>自体をposition:absoluteすることで縦幅の比率を保ったスライドを実現しています。

    ですので、画像が<li>の:first-childに存在しない場合は縦横比3:2のダミー画像を挿入することでレイアウトを保つ仕組みになっています。

  • 画像無しの際に縦横比を変更する方法

    display:noneにでもしてダミー画像を設置して下さい。

    
    <ul>
    <li>
    	<img style="display:none;" src="/images/DUMMY.jpg">
    	<p>HTML</p>
    </li>
    <li>
    	<p>HTML</p>
    </li>
    <li>
    	<p>HTML</p>
    </li>
    </ul>
    

    これで画像を拾うので、縦横比が保持されます。

    ※ あくまで1つ目のリストの最初の画像をcloneしますので、スライドの2枚目が画像でもcloneしません。

    設置代行も行っておりますので、contactよりお問い合わせください。

JS

<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>

機能一覧

  • カルーセルcarousel
  • クロスフェードcross fade
  • ランダムrandom
  • レスポンシブ標準対応Responsive standard
  • 複数設置可Multiple
  • サムネイル対応thumbnail
  • HTML可possible html
  • フリック対応flick
  • 複数アイテムMultiple Items

OPTION

itemDisplay default.itemDisplay

スライドのリスト( <ul>~</ul> )をWrapするクラス。特に問題が無ければ変更の必要はありません。

style defaultnomal
nomal
一般的なスライダーの動き。ラストまで行ったら逆回転で1まで戻る。
carousel
左右どちらに進んでも逆回転せずシームレスにスライドが続きます。カルーセル。
fade
スライドせず、フェードイン・フェードアウトで切り替わります。クロスフェード。
flick defaulttrue

スマートフォンやタブレットなどのタッチパネルデバイスでフリック操作を可能にします。

thumbnails 準備中
rand defaultfalse

ランダムにスライドを変更します。主にfade時の利用を想定していますが、nomal及びcarouselでも問題なくインジケータと同期して動作します。デフォルトはfalseです。

hoverStop defaulttrue

マウスをスライド上に乗せている間、オートスライドをストップします。オプションのautoがfalseの時は何も起こりません。

speed default5000

スライドが発生するタイミングです。ミリ秒単位で指定(5000なら5秒)。オプションのautoがfalseの時は無効です。

auto defaulttrue

スライダーがオートでスライドします。

indicator defaulttrue

インジケータを表示します。場所は、<div class=”itemDisplay”>~</div>の下に挿入されます。


<div class="itemDisplay"> ~ </div>
<div class="indicator">
<span>1</span>
<span>2</span>
<span class="current">3</span>
<span>4</span>
<span>5</span>
</div>
indicatorStyle defaulttrue

インジケータ用のCSSを挿入します。

(.slide1に適用した場合)

.slide1 .indicator { text-align:center; overflow:hidden; text-align:center; width:100%; height:20px; position:relative; top:-30px;}
.slide1 .indicator span { display:inline-block; width:10px; height:10px; text-indent:-9999px; margin:5px; vertical-align:top; cursor:pointer; border-radius:50%; background-color:#999;}
.slide1 .indicator span.current { background-color:#333;}
PrevNext defaulttrue

Prevボタン・Nextボタンを表示します。場所は、<div class=”itemDisplay”>~</div>及びインジケータの下に挿入されます。

HTML

<div class="itemDisplay"> ~ </div>
<div class="indicator"> ~ </div>
<a class="prev" href="" style="top: XXXpx; margin-top: -15px;">prev</a>
<a class="next" href="" style="top: XXXpx; margin-top: -15px;">next</a>
PrevNextStyle defaulttrue

Prevボタン・Nextボタン用のCSSを挿入します。
この際、スライド要素の高さのちょうど真ん中に来るようCSS及びJSが調節されています。(windowの横幅を縮めてみてください)

(.slide1に適用した場合)

.slide1 { position:relative;}
.slide1 .prev { position:absolute; display:block; width:30px; height:30px; top:210px; margin-top:-15px; left:10px; text-indent:-9999px; background:#333; border-radius:50%;}
.slide1 .next { position:absolute; display:block; width:30px; height:30px; top:210px; margin-top:-15px; right:10px; text-indent:-9999px; background:#333; border-radius:50%;}
.slide1 .prev:after { content:""; display:block; position:absolute; top:10px; left:4px; border:solid 5px; border-color:transparent; border-right:solid 9px #fff;} 
.slide1 .next:after { content:""; display:block; position:absolute; top:10px; right:4px; border:solid 5px; border-color:transparent; border-left:solid 9px #fff;}

使い方

スライドさせたい要素をリスト化してdivでWrapし、任意のclass or IDを振ります。
jQueryの本体を読み込ませたあと、Wrapしたdivに対して.shortslider()します。

HTML

// スライドさせたい要素をリスト化して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>
JS
	
// 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>

サイズについて

横幅
<ul>をWrapしたdivの横幅に依存します。
縦幅
スライド1枚目の画像の縦横比を保持したまま拡大されます。
つまり、Wrapしたdivの横幅を元に、画像の縦横比が再現されます。cloneされた画像(<img src=”スライド1枚目の画像.jpg” alt=”” class=”sizer” style=”z-index: -10; visibility: hidden; width: 100%; display: block;”>が出力される)はwidth:100%;になるため小さな画像でも縦横比を保持したまま拡大されます。
スライドの画像自体は拡大されません。(CSSで適宜調節してください)

以下の例では、.slide7のmax-widthを400pxとしています。
またスライド1枚目に正方形の画像を設置しているので、この場合は表示領域も正方形になります。(.itemDisplayに背景色をつけてわかりやすくしています)

HTML

<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>
JS

<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>
CSS

<style type="text/css">
.slide7 { max-width:400px; margin:0 auto 15px;}
.slide7 .itemDisplay { background:#ccc}
.slide7 img { max-width:100%;}
</style>

更新履歴

2017,01,19
ダウンロード数も数百件と伸びていました。大変ありがたいです。ありがとうございます。しばらくしたらテコ入れ、機能追加します。gitHubのzipですが、内容(見た目)が少し古いものになっていますがjs本体は現状では変更ありません。
2015,10,09
GitHubへコードを公開。

download

author : Chiba Takeshi