スライドショー（bxSlider）

現在では便利なスライダーのプラグインが世の中にたくさんリリースされており、a-blog cms の公式テーマでも現在はbxSliderを採用していないことから非推奨になっています。

a-blog cmsでは、画像のスライドショー（bxslider.js）が標準で実装されています。（Ver. 1.6.0より）

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//----------
// bxslider
    bxsliderMark : '.js-bxslider',
    bxsliderConf : {
    mode : 'horizontal', // horizontal | vertical | fade
    speed : 800,
    captions : true,
    auto : true,
    pause : 6000
},

---

---

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。以下のソースコードではバナーモジュールで画像リストを用意してbxsliderでスライドショーを作っています。

<!-- BEGIN_MODULE Banner id="topImage" -->
<ul class="js-bxslider"><!-- BEGIN banner:loop -->
  <li><!-- BEGIN banner#src -->
    {src}[raw]<!-- END banner#src --><!-- BEGIN banner#img -->
    <a href="{url}" target="{target}"><img src="%{ARCHIVES_DIR}{img}" width="{x}" height="{y}" alt="{alt}" /></a><!-- END banner#img -->
  </li><!-- END banner:loop -->
</ul>
<!-- END_MODULE Banner -->

---