カラーミー 2024年01月09日 naeco.jp

カラーミーで使っている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);


追記）原因判明しました
カラーミーキットのviewport（JavaScript）の実行タイミングが問題です。
デフォルトでは、共通HTML内の$(function () { });内に記述されています。HTMLの読み込み完了後に実行することになっています。

ICEテンプレートはutility_index.js内の先頭で読み込んでいます。HTMLの読み込み完了待ちをしていないのです。この違いで、画像の横幅に収まる・収まらないの影響が出ていました。
カルーセル以外でも横幅が収まらないときは viewport（JavaScript）の可能性があります。

ということで、viewport（JavaScript）はHTMLの読み込み完了待ちをする場所に書いてはダメということです。
カラーミーキットでbxSliderを使うときは注意が必要です。

その他、設置先の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

読み込み時に崩れる場合

opacity: 0; にしておいて、コールバック関数でロード後に表示するようにします。また、$(window).load()のタイミングで実行するとよいです。

jQuery

$(window).load(function(){
  $('.bxslider').bxSlider({
    onSliderLoad: function(index){
      $('.slider').css('opacity','1');
    }
  );
});

おわりに

今回紹介したbxSlider 3パターンは昨今のショップサイトでよく見かけるものばかりです。
実際にbxSliderを使ってみた感じでは必要な機能が一通り揃っていて、使いやすい場面もありました。

バグ報告がちらほらあるので、「挙動がおかしい」など手に負えない事態が出てくることもありえますが、その点さえ割り切れば、大変便利な機能です。

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

補足

カラーミーショップの場合、jQueryの本体はheadタグ内に自動で読み込まれます。
既存テンプレートの多くが1.7.2を読み込んでいて、有料テンプレートのいくつかで1.11.0です。

jQueryのバージョンが古くて、jQueryプラグインが動かないことはわりとあります。

執筆者

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

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら