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}