多機能スライダー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について記事にしています。
ご相談・お問い合わせはこちら