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）