bxslider カルーセル

まずは実装サンプルを確認

  • 画像の説明
  • 画像の説明
  • 画像の説明
  • 画像の説明

HTML

bxslider カルーセルを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。

<ul class="bxslider">
    <li><a href="#"><img src="/images/header/top_01.jpg" alt="画像の説明"></a></li>
    <li><a href="#"><img src="/images/header/top_02.jpg" alt="画像の説明"></a></li>
    <li><a href="#"><img src="/images/header/top_03.jpg" alt="画像の説明"></a></li>
    <li><a href="#"><img src="/images/header/top_04.jpg" alt="画像の説明"></a></li>
</ul>

bxsliderフォルダーをアップロード

www.s-contigo.website/bxslider と同じフォルダーを、ルートディレクトリーにアップロード

bxslider カルーセル説明画像

cssの追加

/templates/header.htmlに以下のソースを追加して、cssを読み込む

<link rel="stylesheet" href="{$freo.core.http_url}bxslider/jquery.bxslider.css">

jsの追加

/templates/footer.htmlに以下のソースを追加して、jsを読み込む

<script src="{$freo.core.http_url}bxslider/jquery.bxslider.min.js"></script>
{literal}
<script>
  $(function(){
    $('.bxslider').bxSlider({
      auto: true,
      slideWidth: 1280,
      minSlides: 1,
      touchEnabled: false //chrome対策
    });
  });
</script>       
{/literal}

オプション

オプション項目 オプション説明 オプション記述方法
mode スライド方法を設定
「horizontal」 横方向のスライド
「vertical」 縦方向のスライド
「fade」 フェードでの切り替え
default: 'horizontal'
horizontal / vertical / fade
auto 自動スライドの設定
default: false
true / false
speed default: 500 数字(例:1000)
pause スライドしてから次のスライドまでの待ち時間の設定
default: 4000
数字(例:3000)
infiniteLoop スライドをループさせるかどうかの設定
default: true
true / false
captions 画像にキャプションを表示する事ができます。タグのtitleプロパティ内に記述したものが表示されます。
default: false
true / false
responsive レスポンシブに対応するかどうかの設定
default: true
true / false
touchEnabled タッチスワイプを許可するかを設定
default: true
true / false
pager ページ送りを追加するかどうかの設定
default: true
true / false
controls 前後のコントロールを追加するかどうかの設定。
default: true
true / false
nextText nextのテキストを設定
default: 'Next'
任意のテキスト(例:次へ)
prevText prevのテキストを設定
default: 'Prev'
任意のテキスト(例:前へ)
nextSelector 「nextボタン」を自分で用意する場合にjQueryセレクタで指定
※指定するとデフォルトのボタンは表示されなくなる
任意のクラスやID(例:'#next-btn')
prevSelector 「prevボタン」を自分で用意する場合にjQueryセレクタで指定
※指定するとデフォルトのボタンは表示されなくなる
任意のクラスやID(例:'#prev-btn')
useCSS スライドにCSSアニメーションを使用するかどうかの設定
default: true
true / false
easing スライドのイージングの設定
default:なし
useCSSがtrueの場合
'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'

useCSSがfalseの場合
'swing', 'linear'

autoDirection スライドの方向
default: 'next'
'next', 'prev'
autoHover スライドをホバーした時に、スライドを一時的に止めるかどうかの設定
default: false
true / false
minSlides (カルーセル設定)一度に表示させる最小数を設定
default:なし
数字(例:1)
maxSlides (カルーセル設定)一度に表示させる最大数を設定
default:なし
数字(例:4)
moveSlides (カルーセル設定)一度のスライド時に移動するスライド数 数字(例:4)
slideWidth 各スライドの幅を指定 数字(例:400)

実装サイト

  1. FC北陸
  2. spazio

参考サイト

  1. onze 超簡単jQueryスライダー[bxSlider]の使い方。
  2. jquery.bxslider.jsの使い方やオプション