carouFredSel [plug-in] [jQuery]

2014年に制作した記事を2015/08に加筆修正

スライドショーのように画像などを特定領域内で差し替えて表示するカルーセルスライダーのjqueryプラグインです。
carouFredSelは柔軟にカスタマイズが行えるので、さまざまな表現ができます。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

sample

carouFredSelはかなり自由度の高いカルーセルスライダーですが、js（jQuery）にあまり詳しくないと、初めはどうしたらいいかわからないかもしれません。
まずは、Cool Carouselsのようなサンプル集から、自分が実現したい動きに近いものを選んで、コピペしてそれをカスタマイズしてみると良いでしょう。
複数のサンプルのソースを見ていくうちに、だんだんわかってくると思います。

このサンプルではCool Carouselsの#18を参考にしています。

html

<div id="base_carousel">

<div id="carousel">
<img src="画像パス" alt="画像の内容"><!--表示したい分だけここに羅列-->
</div>

<div id="pager"></div>

</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. Cool Carouselsの#18のhtmlソースから必要な部分をコピペして、適宜id名やclass名を変更（上のサンプルでは元ソースのid[c-carousel]をid[base_carousel]にリネームした）。
    プラグインによっては、id名やclass名を変更すると動作しなくなるものもあるが、carouFredSelはセレクタとして指定したり、オプションでid名やclass名を指定できるので、特に問題はない（はず）。
  2. 元の#18ではページャー（上のサンプルでいえば右上の丸いオブジェクト）にマウスオーバーするとサムネイルが表示されるのだが、上のサンプルでは不要として、コピペしたhtmlソースから削除（元ソースの<div id="thumbs">～</div>の部分）。
  3. その他、構造上不要と判断したタグを削除（このサンプルではid[wrapper]で囲む必要はないかなぁと判断して、削除した）。
  4. <div id="carousel">～</div>の中に、必要なだけimgタグを記述して、画像パスを指定する
  5. 7行目のページャー（上のサンプルでいえば右上の丸いオブジェクト）は表示する位置を決定するためのdivタグ（使用タグはdivに限らない）が設置してあれば、その中身はcarouFredSelから挿入されるので、中にaタグなどを入れなくてもよい。
    もしくは不要であれば、削除してもよい。

css

#base_carousel {
width:600px;
height: 400px;
padding: 0;
margin: 0 auto;
position: relative;
box-shadow: 0 5px 15px #013;
}
#carousel {
width: 600px;
height: 400px;
overflow: hidden;
}
#carousel img {
width: 600px;
height: 400px;
display: block;
float: left;
}

#pager {
position:absolute;
top:10px;
right:10px;
}
#pager a {
background-color: rgba(0,0,0,0.6);
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
border-radius: 10px;
box-shadow: 0 3px 9px rgba(255,255,255,0.8);
}
#pager a.selected {
background-color: rgba(10,66,100,0.6);
}
#pager a span {
display: none;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. CSSもCool Carouselsの#18からコピペ。
  2. id名やclass名を変更したのなら、cssの方も忘れずにリネーム。
  3. このサンプルではサムネイル表示はしないことにしたので、コピペしたCSSからサムネイルに関する設定を削除（元のCSSの#thumbsおよび#thumbs imgの部分）。
  4. 各idやclassのサイズや表示位置などを適宜調整。
  5. 14～19行目：このサンプルではカルーセル表示する画像のサイズをcssで指定しているが、これはサイズの違う画像が混ざっているためで、同じサイズの画像でそのサイズで画面に表示させる場合は、画像サイズの指定は特に必要ない。
    工夫次第で、サイズの違う画像をカルーセルで表示させることもできるし、サイズを固定せずレスポン支部デザインに対応することもできます。

js

$(function() {
$('#carousel').carouFredSel({
items: 1,
scroll: {
fx: 'slide' //コンテンツの切り替わり方を指定（fadeなど）のほか、easingなども設定できる
},
auto: {
timeoutDuration: 3000, //次のコンテンツを表示するまでの時間（現在のコンテンツを表示している時間）
duration: 1000 //切り替わるのに要する時間
},
pagination: {
container: '#pager', //ページャーのid（等）を指定
}
});
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. jQuery（js）もCool Carouselsの#18からコピペ。
  2. id名やclass名を変更したのなら、jsの方も忘れずにリネーム。
    とくにcarouFredSelを適用するid（もしくはclass）の名前を変えた場合は、注意。
  3. このサンプルではサムネイル表示はしないことにしたので、コピペしたjsからサムネイルに関する設定を削除（元のjsではサムネイルを表示するid[thumbscarousel]をthumbsという変数にしているので、thumbsにかかわるjsは不要）。
  4. 必要に応じてオプションの設定を変更。
    このサンプルでは画像の切り替えをcrossfadeからslideに変更するなどしている。

オプションなどについては、このページの下の方にある参考ページや提供元サイトの旧サイトを参照してください。

戻る

Top