前後左右の画像を表示しつつスライドするカルーセルスライダー「jQuery FilmRoll」
2017/02/07
めっきり春っぽくなってきました。
毎年の如くこの季節は花粉症に悩まされる日々、
強風の日とかマジきついです。
コンテンツスライダーで、前後の要素（画像）を表示させたままスライドさせたい場合って、よくありますよね。
「jQuery FilmRoll」というプラグインで、いい感じにできたので使い方をご紹介します。
まずはデモサンプルをご覧下さい。
サンプルデモ・ダウンロードはこちら
配布サイトを見てもらえればわかりますが、
デフォルトの状態から多少手を加えています。
改良した点はこちら
・ページャーを丸ぽっちから画像に変更
・ページャーをクリックしたら切り替わるところを、マウスオーバーに変更
・ページャーの画像にリンクを付与
・左右の矢印をスライダーにマウスオンした時のみ表示
などなどです。
ちょっと無理やりにカスタマイズしてる部分があるのですが。
なんとかスムーズに動いてくれました。
もともとは中央にきたコンテンツに焦点当てることができるJqueryなので、
そういった使い方が最も良いかと思いますが、
メインイメージのスライダー等にも使いやすいプラグインですね。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>前後左右の画像を表示しつつスライドするカルーセルスライダー「jQuery FilmRoll」</h1> <p>jqueryで前後左右の要素（画像）を表示させたままスライドさせたい時に使えます。画像はもちろん、コンテンツもスライドすることができます。画像にリンクも設定できます。</p> <div id="film_roll_slider"> <div><a href="#"><img src="images/L/img01.jpg" alt=""></a></div> <div><a href="#"><img src="images/L/img02.jpg" alt=""></a></div> <div><a href="#"><img src="images/L/img03.jpg" alt=""></a></div> <div><a href="#"><img src="images/L/img04.jpg" alt=""></a></div> <div><a href="#"><img src="images/L/img05.jpg" alt=""></a></div> </div> <div id="film_roll_arrow"> <a href="#" class="btn_prev" id="film_roll_prev"><img src="images/prev01.png" alt=""></a> <a href="#" class="btn_next" id="film_roll_next"><img src="images/next01.png" alt=""></a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
* { padding: 0; margin: 0; } body { background: #eee; } .film_roll_wrapper { overflow: hidden; } .film_roll_shuttle { position: relative; } .film_roll_child { display: inline-block; margin-right: 10px; } .btn_prev, .btn_next { position: absolute; top: 30%; width: 48px; height: 48px; } .btn_prev { left: 15px; } .btn_next { right: 15px; } .btn_prev:hover, .btn_next:hover { opacity: 0.7; } .film_roll_pager { text-align: center; } .film_roll_pager a { display: inline-block; width: 150px; height: 93px; margin: 0 15px 0 0; } .film_roll_pager a:nth-child(1) { background: url(images/S/img01.jpg) no-repeat; } .film_roll_pager a:nth-child(2) { background: url(images/S/img02.jpg) no-repeat; } .film_roll_pager a:nth-child(3) { background: url(images/S/img03.jpg) no-repeat; } .film_roll_pager a:nth-child(4) { background: url(images/S/img04.jpg) no-repeat; } .film_roll_pager a:nth-child(5) { background: url(images/S/img05.jpg) no-repeat; } .film_roll_pager a.active:nth-child(1), .film_roll_pager a.active:nth-child(2), .film_roll_pager a.active:nth-child(3), .film_roll_pager a.active:nth-child(4), .film_roll_pager a.active:nth-child(5) { opacity: 0.6; } .film_roll_pager span { display: none; } #film_roll_arrow { display: none; } |
オプション例
スライドする要素を包括する要素のID【container : #film_roll_slider】
スライド時のアニメーションの時間【animation : 1500】
スライドの間隔【interval : 4000】
デフォルトのCSSをクリアする【no_css : true , false】
ページャーの有無【pager : true , false】
左の矢印の要素のID【prev : #film_roll_prev】
右の矢印の要素のID【next : #film_roll_next】