ShopifyストアにスライドショーjQueryプラグイン「slick」の実装方法をサンプルコードを交えながら解説します。JavaScriptライブラリのAOSとの悪い相性を回避する方法も共有します。
商品一覧やブログの記事一覧をスライドショーで実装したい！という時ありませんか。
もちろん、Shopifyテーマにスライドショーというセクションが用意されていますが、「手動で画像やリンクを挿入するから面倒くさい」「細かなデザインカスタマイズができない」という短所もあります。
商品一覧やブログ記事一覧のループを作成し、JavaScriptなどを使ってスライドショーを作りたいものです。
今回は、あの有名なjQueryプラグイン「slick」をShopifyに実装する方法について紹介したいと思います。
商品一覧やブログ記事一覧を作る方法
まず、商品一覧やブログ記事一覧のループを作る方法ですが、別の記事で方法をまとめてありますので、ぜひそちらを参考に作ってみてください。（この記事では詳しい解説は割愛します）
ブログ記事一覧
Shopify 自作で「ブログ記事一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定
Shopify 自作で「ブログ記事一覧」を作る！HTMLとLiquidの書き方を解説
商品一覧
Shopify 自作で「商品一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定
Shopify 自作で「商品一覧」を作る！HTMLとLiquidの書き方を解説
slickの実装手順
では、本題のslickの実装手順について解説します。
CDNを使ってjQueryを導入
まず、jQueryプラグインが挙動できるようにするため、jQueryをShopifyストラに導入します。
jQuryファイルをダウンロードする方法もありますが、今回はCDNを使って導入する方法を紹介します。
導入場所は「template.liquid」。head内に以下のコードを設置します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>CDNを使ってslickのファイルを読み込む
その次は、同じくhead内にslickのファイル(CSSファイルとJsファイル)を読み込むコードを設置します。
<!-- slickのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
<!-- slickのJavaScript -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> スライドショーを実装するセクションを作る
次は、スライドショーを実装する商品一覧もしくはブログ記事一覧のセクションを作成します。
セクション内のループは前出のリンクをご参考ください。
ループのHTLMLは任意上、
<ul class="slide-items">
<li></li>
</ul>にします。
次はslickのJavaScriptコードを実装します。
{% javascript %}
$(document).ready(function(){
$('.slide-items').slick({
autoplay:true, //自動再生
autoplaySpeed:3500, //再生スピード(1000=1s)
speed: 3000, //次のスライドに移動する際のアニメーション速度
dots: true, //スライドショー下の点
infinite: true, //無限ループ
slidesToShow: 3, //1度に見える表示件数
slidesToScroll: 1, //一度にスクロールされるスライドの数
});
{% endjavascript %}slickなど、jQueryプラグインはWordpressやShopifyに実装しても、なかなか発火しない、挙動がおかしいという時があります。(JavaScriptが苦手の私だけかもしれませんが・・)
上記のコードで問題なく動いたので、ぜひ試してみてください。
他に設定をカスタマイズしたい場合は、以下の記事(外部)をご参照ください。
https://kenwheeler.github.io/slick/
AOSとの相性について
ShopifyストアにJavaScriptライブラリの「AOS」を実装したら、slickとの相性により、実行できない場合があります。
そういう時は、こちらのコードを用いてみてください。
{% javascript %}
$(document).ready(function(){
$('.slide-items').on('init', function(event, slick){
console.log('.slide-items init');
AOS.init(); // ここがAOS
});
$('.slide-items').slick({
autoplay:true,
autoplaySpeed:3500,
speed: 3000,
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
});
});
{% endjavascript %}私の場合、こちらのコードでAOSが実行できました。
レスポンシブ
WordPressに慣れていると、PCとスマホを条件分岐して「slick」のJsコードを２つ設置しがちですが、周知のとおり、ShopifyはPCとスマホの条件分岐ができません。
そういう場合は、(ご存じだと思いますが)responsiveオプションを使用します。
$('.slide-items').slick({
autoplay:false,
autoplaySpeed:3500,
speed: 3000,
dots: true,
arrows: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{ // レスポンシブオプション
breakpoint: 640, // 640pxまでのデバイス
settings: { // レスポンシブセッティング
slidesToShow: 1, // 一度に表示する件数
}
}]
});
});以上、スライドショーjQueryプラグイン「slick」の実装方法とサンプルコードでした。
