jQuery サムネイル連動型の高性能なスライダー【Lof JSliderNews】 – リッチなスライダーの中では一番のお気に入り

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回の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>

バリエーションについて

実装に関しては以上です。ちなみにこのプラグインのデモには6種類のデザインが用意されています。どれもハイクオリティなので使ってみたいですね。

小さいサムネイルナビに連動するスライダーのバージョン。

右側にナビを配置したバージョン。

左側にナビを配置したバージョン。

サムネイルではなく数値をナビにしたバージョン。

左側にナビを配置し、透過でスライドを切り替えるバージョン。

スライドの中身のコンテンツにアニメーションを加えたバージョン。

以上になります。

参照元:Lof JSliderNews
    SNAP MAGAZINE