bxCarousel

bxCarouselは、一度に表示されている要素の数を指定する機能を提供するプラグインjQueryのカルーセルです。 また、スライダーを移動するための要素の数を指定することができます。

javascript

このスクリプトを動作させるためには、index-#.htmlファイルに次のHTMLコードを含める必要があります。

<script type="text/javascript" src="scripts/tiny.js"></script>

基本的な値を使用してスクリプト機能を初期化する以下のコードも記述します:

$(document).ready(function(){
  $('#example1').bxCarousel({
    display_num:4,
    move:2,
    prev_image:'images/icon_arrow_left.png',
    next_image:'images/icon_arrow_right.png',
    margin:10
  });
});

次の属性を持つ#example1のidを持つ要素を初期化します。

• display_num:4,- 見える要素の数。
• move:4, – シフトスライドの要素の数。
• speed:500, – スライドアニメーションが終了するまでの秒数。ミリ秒単位。
• margin:0, – それぞれに適用される右マージン。

element (ピクセルを含んでいない)
• auto:false, – ユーザーのクリックなしで自動的にスライドをスタート。
• auto_interval:2000, – 各自動アニメーションの間にミリ秒単位の時間の量を設定。
• auto_dir:’next’, – 自動スライドショーの方向(オプション:‘next’, ‘prev’)
• auto_hover:false, – ユーザーがスライドショーにホバーした時、スライドショーを停止させる設定。
• next_text:’next’, – ‘next’制御に使用するテキスト。
• next_image:”, – ‘next’制御に使用される画像。
• prev_text:’prev’, – ‘prev’制御に使用するテキスト。
• prev_image:”, – ‘prev’制御に使用する画像。
• controls:true – コントロールが表示されるかどうかを判断します。

HTML

一般的なHTMLの記述例です:

<ul>
  <li>first piece of content</li>
  <li>second piece of content</li>
  <li>third piece of content</li>
  <li>fourth piece of content</li>
  <li>bxCarousel can accept an unlimited number of elements</li>
</ul>

CSS

style.cssファイルにスクリプトに関連した以下の記述があります。

#slider-code{
    height:145px;
    overflow:hidden;
}
#slider-code .viewport{
    float:left;
    width:240px;
    height:125px;
    overflow:hidden;
    position:relative;
}
#slider-code .buttons{
    display:block;
    margin:30px 10px 0 0;
    float:left;
}
#slider-code .next{
    margin:30px 0 0 10px;
}
#slider-code .overview{
    list-style:none;
    padding:0;
    margin:0;
    position:absolute;
    left:0;
    top:0;
}
#slider-code .overview li{
    float:left;
    margin:0 20px 0 0;
    padding:1px;
    height:121px;
    border:1px solid #dcdcdc;
    width:236px;
}
#slider-code .pager{
    overflow:hidden;
    list-style:none;
    clear:both;
    margin:0 0 0 45px;
}
#slider-code .pager li{
    float:left;
}
#slider-code .pagenum{
    background-color:#fff;
    text-decoration:none;
    text-align:center;
    padding:5px;
    color:#555555;
    font-size:14px;
    font-weight:bold;
    display:block;
}
#slider-code .active{
    color:#fff;
    background-color:#555555;
}

Comments are closed.