中途半端を極める

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

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

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

関連記事

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

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

[javascript]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。 うまく …

【javascript】チェックボックスをチェックしないとサブミットできないボタン

個人的には結構使用する動作なので紹介いたします。 プライバシーポリシーや20歳以上の確認を行うときなどに有効ですね。 残念ながらフォームのスパム対策としてはおそらく効果は無いと思われます。

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

Google Maps API V2であまりソースを変更せずV3へ移行する方法

注: Google Maps JavaScript API バージョン 2(V2)は、2010 年 5 月 19 日に正式にサポートが終了しました。V2 の廃止スケジュールは 2013 年 5 月 1 …