jQuery サムネイル連動型の高性能なスライダー【Lof JSliderNews】 – リッチなスライダーの中では一番のお気に入り
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。今回のtipsは【jQuery サムネイルと連動する高性能なスライダー】です。つい最近までリッチなスライダーはFlashでカバーしていましたがこのプラグインを使用すればjQueryで簡単に実装できます。個人的にはシンプルなスライダーにはbxslider、リッチなスライダーにはLofJSliderNews、レスポンシブデザインに使うスライダーはOrbit、それらでカバーできない場合には自作というように使い分けています。
Lof JSliderNews > Download > Demo
実装方法は若干手間ですが、使いこなせばいろいろな所で活用できます。
読み込むファイル
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
事前に用意されてるstyleを読み込みます。設置に関しては本家サイトの方にほぼ完成しているstyleとサンプルがありますので、そちらを改造していただくのが一番かと思います。
JS
<script type="text/javascript">
$(function(){
//スライダー切り替えボタンの設定
var buttons = {previous:$(‘#slide #prev’),next:$(‘#slide #next’) };
$(‘#slide’).lofJSidernews( {
interval : 4000, // 切り替わりのスピード
direction:’opacitys’,
easing:’linear’,// 切り替わりのイージング
duration:1000,// スライドのスピード
auto:true,// 自動再生の可不可
maxItemDisplay:4,
navPosition:’vertical’,// ナビのスライドする方向
navigatorHeight:54,// ナビの高さ
navigatorWidth:190,// ナビの幅
mainWidth:760,// スライダーの幅
buttons:buttons
});
});
</script>
HTML
<div id="slide" class="lof-slidecontent" style="width:760px;">
<div class="main-slider-content">
<ul class="sliders-wrap-inner">
<li><img src="images/slide1.png"></a></li>
<li>…..</li>
<li><img src="images/slide10.png"></a></li>
</ul>
</div>
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li><img src="images/slide1.png"></li>
<li>…..</li>
<li><img src="images/slide10.png"></li>
</ul>
</div>
</div>
<div id="next">NEXT</div>
<div id="prev">PREV</div>
</div>
バリエーションについて
実装に関しては以上です。ちなみにこのプラグインのデモには６種類のデザインが用意されています。どれもハイクオリティなので使ってみたいですね。
小さいサムネイルナビに連動するスライダーのバージョン。
右側にナビを配置したバージョン。
左側にナビを配置したバージョン。
サムネイルではなく数値をナビにしたバージョン。
左側にナビを配置し、透過でスライドを切り替えるバージョン。
スライドの中身のコンテンツにアニメーションを加えたバージョン。
以上になります。