中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

【javascript】複数の画像をウィンドウ幅に合わせてカルーセル風に実装(bxslider編)

投稿日:

ウィンドウ幅いっぱいにスライドを表示させたい。
そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。
見つけたとしても、それがレスポンシブに対応するのか否か。
そんなことまで気にしなくてはいけなくなりました。本当にいやな世の中ですね…

今回はレスポンシブに対応できる「bxslider」を利用してをウィンドウ幅に合わせてスライドするjavascriptを組み込めるよう調整してみました。

javascriptを読み込む

<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.bxslider.min.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		//メインスライダー
		var obj = $('#slide ul').bxSlider({
			auto: true, //スライドショーを自動再生
			pause: 5000, //停止時間
			speed: 2000, //スライドスピード
			mode: 'horizontal', //スライドモード
			controls: true, //コントロール(Next, Prev)を表示するかどうか
			pager: false,
			onSlideAfter:function(){ obj.startAuto();} //以下はコントロール類をクリックするとスライドは終了してしまうので、自動的に再開する
		});
	});
</script>

bxsliderは公式サイトからダウンロードしてください。
bxsliderのオプションの例は以下の通りです。

option 指定できる値(意味) デフォルト
mode ‘horizontal’, ‘vertical’, ‘fade’ ‘horizontal’
speed integer(整数 単位はミリ秒) 500
slideMargin integer(整数 ピクセル)スライド間の距離(マージン) 0
startSlide integer(整数)最初に表示するスライドのインデックス(0から始まる) 0
randomStart boolean (true / false) スライドをランダムに表示するかどうか false
infiniteLoop boolean (true / false)
無限に繰り返すかどうか
true
captions boolean (true / false)
キャプションを表示するかどうか。キャプションは img 要素の title 属性に記述
false
ticker boolean (true / false)
継続的にスライドする(動き続ける)ティッカーモード
false
video boolean (true / false)
スライドにビデオが含まれる場合は「true」に設定してダウンロードした「plugins」
フォルダの「jquery.fitvids.js」も読み込むようにする。
false
responsive boolean (true / false) 
レスポンシブ対応にするかどうか
true
useCSS boolean (true / false) 
true の場合、CSS の transitions が使われ、 false の場合は、jQuery animate() が使われる。
true
pager boolean (true / false)
ページャー(丸いアイコン)の表示
true
controls boolean (true / false)
コントロール(Next, Prev)を表示するかどうか
true
autoControls boolean (true / false)
true の場合 Stop, Start のコントロールが表示される
false
autoControlsCombine boolean (true / false)
true の場合スライドが実行されていれば Stop のみが表示され、停止しているときは Start のみが表示される
false
auto boolean (true / false)
自動的に開始するかどうか
false
pause integer スライドの間隔(ミリ秒で指定) 4000
autoStart boolean (true / false)
スタートボタンを押してからスライドするか、しないか。trueで自動スタート。
true
autoHover boolean (true / false)
true の場合、スライダーにマウスオーバーすると一時停止する
false
minSlides integer(整数)
カルーセル表示の際に表示するスライドの最低数
1
maxSlides integer(整数)
カルーセル表示の際に表示するスライドの最大数
1
slideWidth integer(整数)カルーセル表示の際のそれぞれのスライドの幅(ピクセル) 0

css

スタイルシートはサイトに合わせて調整してください。

#slide{
	clear: both;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
}
#slide .bx-wrapper{
	max-width: 960px!important;
	margin: 0 auto!important;
	position: relative;
}
#slide .bx-wrapper .bx-viewport{
	overflow: visible!important;
}
#slide 	.bx-wrapper .bx-controls-direction a{
	position: absolute;
	text-indent: -9999px;
}
#slide .bx-wrapper .bx-controls-direction a.bx-prev{
	left: 50%;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-left: -50%;
	margin-top: -25px;
	background: url(../img/slide_prev_btn.png) no-repeat left top;
}
#slide .bx-wrapper .bx-controls-direction a.bx-next{
	right: 0%;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-left: 45.750%;
	margin-top: -20px;
	background: url(../img/slide_next_btn.png) no-repeat left top;
}
#slide .bx-pager{
	position: absolute;
	top: 90%;
	text-align: center;
	display: inline-block;
}

html

<div id="slide">
<ul>
<li><img src="./img/img01.jpg" alt="スライド1" /></li>
<li><img src="./img/img02.jpg" alt="スライド2" /></li>
<li><img src="./img/img03.jpg" alt="スライド3" /></li>
<li><img src="./img/img04.jpg" alt="スライド4" /></li>	
<li><img src="./img/img05.jpg" alt="スライド5" /></li>
</ul>
</div>

こちらにデモを作成いたしました。
http://fjri.webcrow.jp/javascript/bxslider/

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【Javascript】IE6でもpng画像を使えるようにする

IE6でpng画像を使うと、透明部分が灰色になって正常に表示されません。 IE6でも正常に表示させるためには「DD_belatedPNG」というライブラリを利用します。 img要素やCSSでの背景(背 …

[javascript]exvalidation.jsが動作しない時必見!代わりとなるjavascriptを紹介

jqueryのバージョンによってはexvalidation.jsが動作しない場合があります。 ※特に新しいバージョンのjqueryを使用しているときに動作しなくなった方が多いのではないでしょうか? 動 …

HTMLで生年月日から自動で年齢を読み込む方法

HTMLで年齢を表示させる場合、毎年手動で更新している人が多いかもしれません。自分もその中の一人でした。 実際毎年手動で更新するのは面倒くさいし、数が多いと忘れてしまう場合があります。 そんなことにな …

【javascript】thickboxを組み込んでもポップアップせず、動作がしないときの対処法

thickboxを組み込んでもポップアップせず、動作がしないときの対処法 wordpressでPicasa and Google Plus Expressというプラグインを使用していて、画像をポップア …

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします …