ウィンドウ幅いっぱいにスライドを表示させたい。
そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。
見つけたとしても、それがレスポンシブに対応するのか否か。
そんなことまで気にしなくてはいけなくなりました。本当にいやな世の中ですね…
今回はレスポンシブに対応できる「bxslider」を利用してをウィンドウ幅に合わせてスライドするjavascriptを組み込めるよう調整してみました。
javascriptを読み込む
[js]
<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>
[/js]
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
スタイルシートはサイトに合わせて調整してください。
[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;
}
[/css]
html
[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>
[/html]
こちらにデモを作成いたしました。
http://fjri.webcrow.jp/javascript/bxslider/