前後左右の画像を表示しつつスライドするカルーセルスライダー「jQuery FilmRoll」

      2015/11/17

前後左右の画像を表示しつつスライドするカルーセルスライダー「jQuery FilmRoll」

めっきり春っぽくなってきました。
毎年の如くこの季節は花粉症に悩まされる日々、
強風の日とかマジきついです。

コンテンツスライダーで、前後の要素(画像)を表示させたままスライドさせたい場合って、よくありますよね。
「jQuery FilmRoll」というプラグインで、いい感じにできたので使い方をご紹介します。

まずはデモサンプルをご覧下さい。

サンプルデモ・ダウンロードはこちら

配布サイトを見てもらえればわかりますが、
デフォルトの状態から多少手を加えています。

改良した点はこちら

・ページャーを丸ぽっちから画像に変更
・ページャーをクリックしたら切り替わるところを、マウスオーバーに変更
・ページャーの画像にリンクを付与
・左右の矢印をスライダーにマウスオンした時のみ表示

などなどです。

ちょっと無理やりにカスタマイズしてる部分があるのですが。
なんとかスムーズに動いてくれました。

もともとは中央にきたコンテンツに焦点当てることができるJqueryなので、
そういった使い方が最も良いかと思いますが、
メインイメージのスライダー等にも使いやすいプラグインですね。

HTML

CSS

オプション例

スライドする要素を包括する要素の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】

サンプルデモ・ダウンロードはこちら

配布サイト

http://straydogstudio.github.io/film_roll/