スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

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の使い方やオプション