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
    });
  });
</script>       
{/literal}

実装サイト

  1. FC北陸
  2. spazio

参考サイト

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