マウススクロールにも対応しているリッチスライダーJSプラグイン「Lof JSliderNews」

メインビジュアルなどで使われることの多いスライダーとナビゲーションの機能が合わさったリッチスライダー「Lof JSliderNews」の使用法についてご紹介いたします。 blog_01

配布サイト デモページ ダウンロードページ

このJSプラグインについて

  • GPLライセンス
  • 対応ブラウザ IE6+、FF、GCで動作確認しました。 (あくまでこれは自分が確認した範囲であり、公式情報ではありませんのであしからず)
     ※IE9以下ではCSS3の部分は動きませんが、ナビゲーションなどは問題なく動いています。
  • jQuery v1.7.1 +

使い方

ダウンロードするとデモを含めたファイルでダウンロードされます。 そこから必要なものは以下の通りです。

読み込むファイル

  • js/jQuery
  • js/jquery.easing
  • js/script
  • css/style-x.css (複数レイアウトパターンがあるので、使いたいものを呼び出す)

※style-x-rtlはオプションで、文字を右寄せにしたい場合は読み込みましょう。(後述) ・各種ナビ部分の 画像(スタイルによって使う画像は違うようです)

HTMLの用意 (demo1)

demo1を参考に必要なHTML要素を下に書き出しました。

HTMLは主に以下の要素が必要です。(インデントは階層順)

  • .lof-slidecontent (スライダーの全てを囲う大枠)
    • ul.sliders-wrap-inner(コンテンツとして動く部分の大枠)
      •  li (コンテンツブロック)

サムネイルナビゲーション部分

  • .navigator-content (ナビゲーションの大枠)
    • div.button-next(サムネイルのナビの後へ)
    • navigator-wrapper(ナビゲーションの中枠)
      • ul.navigator-wrap-inner(ナビゲーションの中枠)
        • li(ナビゲーションのサムネイル)
          • slider-description(スライダーの説明箇所
    • div.button-previous(サムネイルナビの前へ)

プリロード中画面

  • .preload
    • div (このdivは空で挿入)

前へ、後ろへ(prev、next)

  • .button-previous
  • .button-next

自動再生ボタン

  • div.button-control span

サンプルコード

同じくdemo1を元に読み込むファイルを抜き出して見ます。

head
...
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link rel="stylesheet" type="text/css" href="css/style1-rtl.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/script.js"></script>
...


body
...

<div id="jslidernews1" style="width:980px; ">
    <div><div></div></div>
    <div style="width:980px; height:340px;">
        <ul>
            <li><!-- コンテンツ -->
                <img src="xxx">メイン画像
                <div>
                    <!-- 説明となる箇所 -->
                </div>
            </li>
            <li>...</li>
        </ul>
    </div>
    <!-- ナビゲーション -->
    <div>
        <div>Next</div>    
        <ul>
            <li><img src="xxx.jpg"></li>
            <li>...</li>            
            <li><img src="xxx.jpg"></li>
        </ul>
        <div >Previous</div>        
    </div>    
    <!-- 自動再生 -->
    <div><span></span></div>
</div>

javascriptの実行


<script type="text/javascript">
 $(document).ready( function(){    

var buttons = { previous:$('#jslidernews1 .button-previous') ,
                next:$('#jslidernews1 .button-next') };        
                            
$('#jslidernews1').lofJSidernews({
    interval : 4000, //自動再生時の切り替えスピード
    direction       : 'opacitys',    
    easing          : 'easeInOutExpo',
    duration        : 1200, //コンテンツの切替スピード
    auto            : true, //ロード時の自動再生
    maxItemDisplay  : 3,//ナビのアイテム表示数
    navPosition     : 'horizontal', // horizontal //ナビのスタイル(縦or横)
    navigatorHeight : 32, //ナビサムネイルの横幅
    navigatorWidth  : 80, //ナビサムネイルの縦幅
    mainWidth       : 980, //スライダーの幅
    buttons         : buttons
    ,rtl:true //文字を右寄せにする
    
});    

});
</script>

.lofJSidernews({ … })の中でブロックが変わるスピードやeasingを利用した動作の種類などを設定することができます。

easingJSの動きサンプルについては以下のサイトなどをご参考いただければと思います。

Easing Function 早見表 http://easings.net/ja 

レイアウトに応じて横幅の設定が必須だったり、必要の無い記述もあったりしますが、

$(‘#jslidernews1’).lofJSidernews({}) だけではキレイに動きませんので注意。

ぜひともお試しいただければと思います。