カラーミーで使っているbxSliderの機能と使い方を解説します

ショップの第一印象に大きな影響を与えるファーストビュー。カラーミーショップにもスライドショー機能(大きい画像がスライドするあれですね)を設置できる機能が備わっています。スライドショー、簡単にスライダーと言ったりします。

カラーミーショップにもスライダーを設置できる機能が備わっていて、bxSliderというjQueryプラグインを利用しています。

今回、使う機会があって色々調べましたので、設置(Smartyの小技)や有用な使い方を記事にまとめました。
デモページも用意しています。

スライダーをトップ部分に設置する

設置方法はカラーミーショップのマニュアルに、丁寧に書いてあります。初めて設置する方は目をとおしてください。
管理画面から、ショップ作成>デザイン>スライドショー(左サイドメニュー)。ここでスライド画像をセットし、出力用タグをスライダーの表示先にコピペします。
参考)スライドショー設定 | カラーミーショップ マニュアル

マニュアルにあるとおり(通常は)出力用タグをトップ部分の一番上にコピペします。
有料テンプレート「MODE」は、あらかじめ出力用タグがトップ部分の一番上にセットされていますので、画像をアップロードするだけで表示できます。
MODEテンプレートを使ったサンプルショップでは下のように表示されています。

テンプレートMODE

スライダーを共通部分に設置する

インパクトのある大きい画像を表示させたい場合はどうでしょうか? 有料テンプレート「Panorama」が参考になります。このテンプレートではbxSliderではなくsupersizedというプラグインを使っていますが、考え方自体は同じです。

Panoramaテンプレートを使ったサンプルショップでは下のように表示されています。

テンプレートPanorama

二カラム(サイドメニューがある)の場合、出力用タグをトップ部分に書くのと、共通部分に書くのでは、見た目が大きく異なってきます。Panoramaテンプレートでは共通部分に書いてあります。

考慮すべきは、トップページにはスライダーを表示しますが、それ以外のページにはスライダーを表示しないようにSmartyで条件文を書く必要がある点です。
<{if $tpl_name == "top" }>出力用タグ<{/if}>
このようにすると、トップページの場合のみスライダーが表示されます(下例ではbxSliderを出力します)。

共通HTMLに出力用タグを記述する

<!-- スライダー -->
<{if $tpl_name == "top" }>
  <{if $slideshow_html}>
  <div class="slider">
    <{$slideshow_html}>
  </div>
  <script type="text/javascript">
  //<![CDATA[
  $(function(){
    $('#slider').bxSlider({
      auto: true,
      pause: 2000,
      speed: 1000,
      controls: false,
      captions: true,
      mode: 'fade'
    });
  });
  //]]>
  </script>
  <{/if}>
<{/if}>
<!-- /スライダー -->

サイドメニューがない一カラムの場合は、出力用タグをトップ部分・共通部分どちらに設置しても大きな画像で表示できます。
一カラムの例は有料テンプレート「ICE」が参考になります。トップ部分に書いてあります。

ICEテンプレートを使ったサンプルショップでは下のように表示されています。

テンプレートICE1

小画像を並べて回すカルーセルパネルについて

大スライダーの下の小スライダー。小画像がスライドしている機能がカルーセルです。
このカルーセルは大スライダーとは別に(通常は管理画面外で)画像登録・パラメータ設定をする必要があります。

ICEテンプレートを使ったサンプルショップでは、大スライダーの下に小画像が並べてあります。

テンプレートICE2

このカルーセルもbxSliderで設置できます。パラメータを変更するだけ見た目が変わります。
ICEテンプレートでは、以下のようなパラメータ(太字部分)が指定されています。

$([data-carousel="banner"]).bxSlider({ slideWidth: 400, minSlides: 2, maxSlides: 10, pager: false, useCSS: false, speed: 250, slideMargin: 2, auto: true });

ブラウザ横幅に応じて小画像の数が増減します。最小表示枚数2枚(minSlides: 2)、最大表示枚数10枚(maxSlices: 10)で表示します。
画像横幅は400px(slideWidth:400)で、横幅が狭い場合は最小表示枚数を収めるように自動的に縮小しています。画像サイズより大きい指定をすると隙間になります。

パラメータの説明は、以下の参考リンクが詳しいです。
参考)bxSliderパラメータのまとめ | システム開発ブログ | webシステム開発のトラストシステム

カルーセルのサンプルコード(表示枚数固定)

ICEテンプレートの場合はブラウザ横幅に応じて表示枚数は可変でしたが、一番右端の画像が途中で切れるので表示枚数固定にしたいことがあります。
表示エリアが幅固定の場合などは枚数固定の方がきれいに並べやすいです。

最小表示枚数3枚(minSlides: 3)、最大表示枚数3枚(maxSlides: 3)で表示するサンプルコードを書きました。

サンプルコードと簡単な説明

HTML(href src altの属性名を埋めて使って下さい)

<!-- バナー メイン -->
<ul id="carousel">
  <li>
    <a href="">
      <img src="" alt="" />
    </a>
  </li>
  <li>
    <a href="">
      <img src="" alt="" />
    </a>
  </li>
  <li>
    <a href="">
      <img src="" alt="" />
    </a>
  </li>
  <li>
    <a href="">
      <img src="" alt="" />
    </a>
  </li>
</ul>
<!-- /バナー メイン -->

jQuery

// bxSlider
$(function () {
  $('#carousel').bxSlider({
    slideWidth: 400,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
    pager: false,
    useCSS: false,
    speed: 250,
    slideMargin: 10,
    controls: false,
    auto: true
  });
});

「moveSlides: 1」でスライド時の画像送り枚数が1枚になります。
「slideMargin: 10」は画像の右マージンです(10pxになります)。
ブラウザ横幅が広く画像が小さい場合は隙間が空きます(その場合は大きめの画像を用意します)。

bxSliderプラグインを読み込む必要があります(カラーミーショップの共通部分で読み込むのが一般的です)。
テンプレートによってはすでに読み込んでいる場合もありますので、その場合は記述不要です。

jQueryプラグイン

<link rel="stylesheet" type="text/css" href="./js/jquery.bxslider/jquery.bxslider.css">
<script src="./js/jquery.bxslider/jquery.bxslider.min.js"></script>

 

表示が上手くいかない場合は、結構大変

viewportの設定がなければ、スマホ閲覧時に画像が横幅に収まりません。すでに記述済みの場合でも、設置ページに下のコードを書かないときれいに収まりませんでした。
ICEテンプレートでは不要ですし、私がテストしたカラーミーキットでは必要でしたので、テンプレートごとに何か違うのかな?という感じです(いまのところ原因不明)。
実際にやってみて必要かどうか試してください。

JavaScript(head部にviewportを設定します)

// viewport
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);

 

その他、設置先のCSS(おもにmarginやwidthなど)の影響を受けます。画像の端数がでたり、表示位置がずれることもあります。

読み込んでいるjQueryのバージョンでも挙動が異なります。
ICEテンプレートは1.11.0を読み込んでいますが、その他多くのテンプレートでは1.7.2を読み込んでいます。
たとえば、ブラウザ横幅を狭めたとき、1.11.0は画像も追従して小さくなりますが、1.7.2はブラウザをリロードしなければ画像は小さくなりません

デモページを作りました

カラーミーショップ上にbxSliderを使ったデモページ三つ用意しました。
動作を確認したり、ソースコードを見て設置の際の参考にして下さい。

画像3枚固定表示

上でサンプルコードを紹介しました。【デモページ
トップページの上の方で、お知らせ、イベント情報、商品カテゴリーなどのバナーを流したりします。

ICEテンプレートでは、おすすめ商品、売れ筋商品、最近チェックした商品にもカルーセルを使っています(ページが間延びせず商品点数が多く置けます)。

左右が少し見えているスライダー

表示エリアがslideWidthより広い場合に左右画像が少し見えるという仕様です。【デモページ
機能的には、bxSliderよりもslick(別のスライダー)で付けるほうが気が利きます。
参考)bxsliderで両サイドに画像を表示させて横スクロールさせない

商品詳細ページの大画像+サムネイル画像

スマホでスワイプできるようになります(これが便利!)。【デモページ

その他

数多い機能をデモ付きで紹介してくれている外部サイト。とても参考になります。
参考)jquery.bxslider.jsを使ったサンプルいろいろ | cly7796.net

おわりに

今回紹介したbxSlider 3パターンは昨今のショップサイトでよく見かけるものばかりです。
実際にbxSliderを使ってみた感じでは必要な機能が一通り揃っていて、使いやすい場面もありました。
バグ報告がちらほらあるので、「挙動がおかしい」など手に負えない事態が出てくることもありえますが、その点さえ割り切れば、大変便利な機能です。

私はふだん slickを使っていましたが、bxSliderもなかなかどうして。
余談ですが、slick自体はカラーミーショップのスマホ用テンプレートPLAIN内で使っていますので、動作やコードに興味があればそちらを参考にどうぞ。

補足

カラーミーショップの場合はhead内で自動で読み込まれ、多くが1.7.2で、有料テンプレートのいくつかで1.11.0です。jQueryのバージョンが古くて、jQueryプラグインが動かないことはわりとあります。

複数のjQueryを読み込むのは非推奨ですが、バージョンをどうにかする方法は二つ考えられます。
・集客>検索エンジン対策>headタグ内フリースペース設定に書く(こっちに書いた方が有効になる)
・noConflictで動かす(自動で読み込まれたバージョンと共存させる)

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら