horizontal //スライドのエフェクト 'horizontal', 'vertical', 'fade'
default: 500 //スライドのアニメーションの時間
0 //スライドとスライドのマージン
0 //初めのスライドの指定
false //スライドの初めをランダムに
'' //スライドのセレクタを指定
true //ループさせるか否か
false //スライドが最後の時に、次へのリンクを消すか否か
null //イージングの設定※easingのプラグインが必要
false //キャプションの設定 Captionsはイメージのtitle属性に記述
false //スライダーをティッカーモードで使用
false //マウスオーバーでティッカーを停止
false //スライドの高さが違う場合、それぞれ調節して合わせるかどうか
500 // Slide height transition duration (in ms). only used if adaptiveHeight: true
false // If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
true // Enable or disable auto resize of the slider
true //ページャーの有無
null //サムネイルページャーの指定
true //次へ、前へ等のコントロールの有無
'Next' //次へのテキスト
'Prev' //前へのテキスト
false //自動、ストップボタンの有無
'Start' //自動ボタンのテキスト
'Stop' //ストップボタンのテキスト
false //自動スタート再生さるかいなか
4000 //スライドの切り替えの間
1 //最低限表示する数
1 //マックスで表示する数
1//スライドをどのくらいの数を動かすか
0 //ひとつの要素の幅を指定
$(document).ready(function(){ $('#bxslider1').bxSlider({ auto:true, captions:true }); $('#bxslider2').bxSlider({ auto:true, autoControls:true, captions:true }); $('#bxslider3').bxSlider({ auto:true, slideWidth:600, minSlides:2, maxSlides:3, slideMargin:10, captions:true }); $('#bxslider4').bxSlider({ auto:true, slideWidth:900, pagerCustom: '#bx-pager', captions:true }); $('#bxslider5').bxSlider({ auto:true, slideWidth:900, mode:'vertical', slideMargin:20, captions:true }); $('#bxslider6').bxSlider({ auto:true, slideWidth:500, video:true }); });
<div id="slider" class="col-xs-12 col-sm-8 col-md-8"> <ul id="bxslider1" class="bxslider"> <li><img src="images/slide1.jpg" title="Find the perfect hairstyle a la Lauren Conrad for every type of festive fête." /></li> <li><img src="images/slide2.jpg" title="The latest hairstyles and instructions on how to create them here. Total Beauty has your complete hairstyles guide" /></li> <li><img src="images/slide3.jpg" title="If you are looking for something a little special for your big night out, check out Rare London's collection of stunning party dresses" /></li> <li><img src="images/slide4.jpg" title="The bodycon dress is a key silhouette for this season's party girl; from sleek colour-block panelling to geometric prints the bodycon." /></li> </ul> </div> </div> <div class="container"> <header>with start/stop controls</header> <ul id="bxslider2" class="bxslider"> <li><img src="images/slide1.jpg" title="Find the perfect hairstyle a la Lauren Conrad for every type of festive fête." /></li> <li><img src="images/slide2.jpg" title="The latest hairstyles and instructions on how to create them here. Total Beauty has your complete hairstyles guide" /></li> <li><img src="images/slide3.jpg" title="If you are looking for something a little special for your big night out, check out Rare London's collection of stunning party dresses" /></li> <li><img src="images/slide4.jpg" title="The bodycon dress is a key silhouette for this season's party girl; from sleek colour-block panelling to geometric prints the bodycon." /></li> </ul> <header>responsive carousel</header> <ul id="bxslider3" class="bxslider"> <li><img src="images/slide1.jpg" title="Find the perfect hairstyle a la Lauren Conrad for every type of festive fête." /></li> <li><img src="images/slide2.jpg" title="The latest hairstyles and instructions on how to create them here. Total Beauty has your complete hairstyles guide" /></li> <li><img src="images/slide3.jpg" title="If you are looking for something a little special for your big night out, check out Rare London's collection of stunning party dresses" /></li> <li><img src="images/slide4.jpg" title="The bodycon dress is a key silhouette for this season's party girl; from sleek colour-block panelling to geometric prints the bodycon." /></li> </ul> <header>thumbnail pager</header> <ul id="bxslider4" class="bxslider"> <li><img src="images/slide1.jpg" title="Find the perfect hairstyle a la Lauren Conrad for every type of festive fête." /></li> <li><img src="images/slide2.jpg" title="The latest hairstyles and instructions on how to create them here. Total Beauty has your complete hairstyles guide" /></li> <li><img src="images/slide3.jpg" title="If you are looking for something a little special for your big night out, check out Rare London's collection of stunning party dresses" /></li> <li><img src="images/slide4.jpg" title="The bodycon dress is a key silhouette for this season's party girl; from sleek colour-block panelling to geometric prints the bodycon." /></li> </ul> <div id="bx-pager"> <a data-slide-index="0" href=""><img src="images/thumbs/slide1.jpg" /></a> <a data-slide-index="1" href=""><img src="images/thumbs/slide2.jpg" /></a> <a data-slide-index="2" href=""><img src="images/thumbs/slide3.jpg" /></a> <a data-slide-index="3" href=""><img src="images/thumbs/slide4.jpg" /></a> </div> <header>vertical slider</header> <ul id="bxslider5" class="bxslider"> <li><img src="images/slide1.jpg" title="Find the perfect hairstyle a la Lauren Conrad for every type of festive fête." /></li> <li><img src="images/slide2.jpg" title="The latest hairstyles and instructions on how to create them here. Total Beauty has your complete hairstyles guide" /></li> <li><img src="images/slide3.jpg" title="If you are looking for something a little special for your big night out, check out Rare London's collection of stunning party dresses" /></li> <li><img src="images/slide4.jpg" title="The bodycon dress is a key silhouette for this season's party girl; from sleek colour-block panelling to geometric prints the bodycon." /></li> </ul> <header>responsive video</header> <ul class="bxslider"> <li><iframe src="https://www.youtube.com/embed/SXspt4vFx7o" frameborder="0" allowfullscreen></iframe></li> <li><iframe src="https://www.youtube.com/embed/buYDqYkMdW4" frameborder="0" allowfullscreen></iframe></li> <li><iframe src="https://www.youtube.com/embed/hD_J9B0IvhE" frameborder="0" allowfullscreen></iframe></li> <li><iframe src="https://www.youtube.com/embed/Yc-cP3Q24TA" frameborder="0" allowfullscreen></iframe></li> </ul> </div>