多機能スライダーSwiperをカラーミーに設置する方法を解説します

Swiperは多機能なスライドショープラグインです。
他のスライドショーではできない機能も備わっていて、また細かいパラメータや関数が用意されていて作り込む系のスライドショーになっています。

JavaScriptで書いてありますので、jQueryが不要です。
その点もSwiperを選ぶ理由にすることがあるようです。

カラーミーショップに設置して、動かしてみました。
かんたんなサンプルコードも用意しましたので、参考にしてください。

Swiperの主な機能について

オーソドックスな機能は揃っています。
複数枚並べる垂直方向のスクロール複数行のレイアウト
サムネイルとメイン画像の連携ページネーションの変更
画像切り替わり時の3Dエフェクト視差効果
Lazy Loadブレイクポイントズームなど。

ページネーション(通常スライドショー下にある●)を選べるのはめずらしいです。

3Dエフェクトはほとんどみかけませんが、面白い機能です。

ズーム機能もめずらしいです。ズーム系プラグインを入れると細かい作り込みができますが、そこまでは不要の場合はSwiperのみで実装できます。

機能を大まかに知るためには「Swiper Demos」ページに目を通しておきましょう。


デモ以外で細かい作り込みが必要な時は「Swiper API」のマニュアルを確認します。かなり細かい設定やイベントによる実行が可能です。この点もSwiperの特徴です。

Swiperで必要な基本コード

Getting Started With Swiper」にマニュアルがあります。

プラグイン本体

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


HTML
swiper-container、swiper-wrapper、swiper-slideは必須で、class名は基本的にそのままで使い、class名を変更する場合はパラメータ(containerModifierClass、wrapperClass、slideClass)を使用し、変更します。
ページネーション以下は必要な場合に書きます。

そして、下例のとおりに入れ子にします。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
        ...
  </div>
  <!-- ページネーションが必要なときは -->
  <div class="swiper-pagination"></div>

  <!-- 左右のボタンが必要なときは -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバーが必要なときは -->
  <div class="swiper-scrollbar"></div>
</div>


Swiperの初期化(JavaScript)
オプションパラメータの設定をして、Swiperを初期化します。
初期化では動作時の初期設定をして、そしてSwiperを起動します。

下例ではdirectionパラメータに'vertical'を設定しています。
loopパラメータをtrueにして、ループするスライドショーに設定しています。
細かい内容は「Swiper API」のパラメータの項目を参照します。

ページネーション以下は、必要な場合に書きます。

var mySwiper = new Swiper('.swiper-container', {
  // パラメータ
  direction: 'vertical',
  loop: true,

  // ページネーションが必要なときは
  pagination: {
    el: '.swiper-pagination',
  },

  // 左右のボタンが必要なときは
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバーが必要なときは
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

Swiperをカラーミーショップに実装する例

トップページの大スライダーとして使う

カラーミーショップの管理画面からスライド画像を登録すると、独自タグ<{$slideshow_html}>が使えます。

独自タグの中身は以下のようになっています(読みやすいように改行を入れています)。

<div id="slider">
  <div>
    <a href="https://naeco.jp/product/colorme-template-02">
      <img src="https://img21.shop-pro.jp/PA01424/042/slideshow/slideshow_img_380b2e.jpg?cmsp_timestamp=20190711112227" alt="" title="Hello!<br>Natural Living And Simple Life.">
    </a>
  </div>
  <div>
    <a href="https://naeco.jp/product/colorme-template-02">
      <img src="https://img21.shop-pro.jp/PA01424/042/slideshow/slideshow_img_936b2d.jpg?cmsp_timestamp=20190713204617" alt="" title="スライドショーを横幅いっぱいに表示するには<br>大きめの画像が必要です">
    </a>
  </div>
  <div>
    <a href="https://naeco.jp/product/colorme-template-02">
      <img src="https://img21.shop-pro.jp/PA01424/042/slideshow/slideshow_img_2b33d2.jpg?cmsp_timestamp=20200508212835" alt="" title="スライドショーの横幅が広すぎる場合は<br>狭めることも可能です">
    </a>
  </div>
  <div>
    <a href="https://naeco.jp/product/colorme-template-02">
      <img src="https://img21.shop-pro.jp/PA01424/042/slideshow/slideshow_img_9d1288.jpg?cmsp_timestamp=20200629142220" alt="" title="ここの画像は横幅1130pxです">
    </a>
  </div>
</div>


独自タグ<{$slideshow_html}>はもともとがSwiper用ではないので、Swiperで動かすには必須のclassがたりていません。addClassで追加します。
ページネーションもappendで追加します。
Swiper初期化より前に追加しておけば、問題ないのだろうと思います。

class="swiper-container"のうしろに、heroという任意のclassを付けて、初期化の際にはheroを指定します。

var mySwiper = new Swiper('.hero'

複数設置時は区別して初期化しなければなりません。
swiper-containerを指定すると、うっかり複数回初期化してしまい、挙動が怪しくなります。任意のclassを付けて、そちらで初期化の指定をします。

初期化のコードは一番最後に実行する感じで(順番は大事)。

delay: スライドが止まっている時間
loop: スライドの終わりがくると、最初に戻る
speed: スライドを切り替えはじめてから終わるまでの時間

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- スライドショー -->
<{if $tpl_name == "top"}>
  <div class="swiper-container hero">
  <{if $slideshow_html}>
    <{$slideshow_html}>
  <{/if}>
  </div>
<{/if}>
<!-- //スライドショー -->

<script>
$('#slider').addClass('swiper-wrapper');
$('#slider > div').addClass('swiper-slide');
$('.hero').append('<div class="swiper-pagination"></div>');
	
var mySwiper = new Swiper('.hero', {
  // Optional parameters
  autoplay: {
    delay: 5000,
  },
  loop: true,
  speed: 1000,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },
})
</script>


商品詳細ページに設置する

Swiperはレスポンシブ対応で、画像送りをスワイプで行えますますので、スマートフォン閲覧時の商品画像部分にも使えます。

slidesPerView: スライドの表示枚数
slideToClickedSlide: クリックしたスライドに移動
centeredSlides: 表示画像を真ん中に
spaceBetween: スライドの余白

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<style>
#product .swiper-button-next, #product .swiper-button-prev {
  background-color: #eee;
  color: #333;
  width: 30px;
  height: 100%;
  top: 0;
  margin-top: 5px;
}
#product .swiper-button-next::after, #product .swiper-button-prev::after {
  font-size: 20px;
}
#product .swiper-button-next {
  right: 0;
}
#product .swiper-button-prev {
  left: 0;
}
#product .thumb {
  padding: 5px 30px 0;  
}
</style>

<!-- 商品画像 -->
<div>
  <div class="swiper-container slider">
    <div class="swiper-wrapper">
      <{if $product.img_url != ""}>
        <div class="swiper-slide"><img src="<{$product.img_url}>"></div>
      <{else}>
        <div class="swiper-slide"><img src="https://img.shop-pro.jp/tmpl_img/68/prd_lst_noimage.png"></div>
      <{/if}>
      <{section name=num loop=$otherimg}>
        <{if $otherimg[num].url != ""}>
          <div class="swiper-slide"><img src="<{$otherimg[num].url}>"></div>
        <{/if}>
      <{/section}>
    </div>
  </div>
  <{if $otherimg_num != 0}>
    <div class="swiper-container thumb">
      <div class="swiper-wrapper">
        <{if $product.img_url != ""}>
          <div class="swiper-slide">
            <img src="<{$product.img_url}>">
          </div>
        <{/if}>
        <{section name=num loop=$otherimg}>
          <{if $otherimg[num].url != ""}>
          <div class="swiper-slide">
            <img src="<{$otherimg[num].url}>">
          </div>
          <{/if}>
        <{/section}>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  <{/if}>
</div>
<!-- //商品画像 -->

<script>
var mainSlider = new Swiper('.slider', {
  loop:true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

var Thumbnail = new Swiper('.thumb', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop:true,
  slidesPerView: 6,
  slideToClickedSlide: true,
  //centeredSlides: true,
  //spaceBetween: 2,
});

//メイン画像とサムネ画像を連動させる
mainSlider.on('slideChange', () => {
  Thumbnail.slideToLoop(mainSlider.realIndex);
});
Thumbnail.on('slideChange', () => {
  mainSlider.slideToLoop(Thumbnail.realIndex);
});
</script>

連携部分は「Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説」を参考にさせていただきました。Swiperのイベントとメソッドで実装しています。

おわりに

カラーミーショップを使っていても、管理画面からスライド画像を登録してSwiperを使うことができます。画像の変更がしやすいので、独自タグを使って設置するのがおすすめです。

Swiperは、slickほどには普及していないように思いますが、検索するとサンプルがそれなりに見つかりました。
スライドショーにこんな機能がほしいなぁと思ったら、検索して探してみてください。

執筆者

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

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

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