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

bxslider
このエントリーをはてなブックマークに追加
PR

bxSlider

bsSlider

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

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

DEMO

 

基本的な利用の方法

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>

 

 

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

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

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)