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 と同じフォルダーを、ルートディレクトリーにアップロード
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}