Youtubeなどの動画もスライドに出来る javascriptプラグイン bxSlider

Tweet

238

bxSlider

bsSlider

bsSliderはjQueryライブラリを使ったプラグインです

画像のスライドはもちろん、動画をスライドに組み込むことが出来ます

基本的な利用の方法

Step1  ヘッダーに jQuery と bxSlider のファイルを指定する

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step2 HTMLにスライド部分を作る。 リスト状になったものに Class を指定するだけです

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step3  javascript コードを挿入する、できるだ け</body> の手間に設置します

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

これで、基本的な設置は完了です
あとは Step3 の javascript の部分にオプションを色々設定することが出来ます

ライセンスはWTFPL licenseとなっています

ライセンス表記をすれば無料で利用・再配布することが出来ます

Tweet

短縮URL:

2013年09月13日 WEB制作系 PC全般 フリーウェア jQueryスライドプラグイン