Shopify
PR

【Shopify】Slick スライドショーを使う

にゃん花子
記事内に商品プロモーションを含む場合があります

SlickをShopifyで使うにゃん!

今回はDawnで、Slickを使用しました。Slickの本家サイトにのっている方法では、Shopifyでは動かなかったので、設定方法をご紹介します。

Google広告

<head></head>に読み込むのはJqueryだけ

theme.liquidファイルの</head>直前に、Jqueryを読み込みます。
(SlickはJqueryに依存しているため必須です)

1<!--jqueryを追加 -->  
2  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

cdnとオリジナルcss、jsは</body>の直前で読み込む

theme.liquidファイルの</body>直前に、cdnとご自身で用意したcssとjsファイルも読み込みます。

1    <!--slick-->
2    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
3    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
4    {{ 'slider-slick.css' | asset_url | stylesheet_tag }}
5    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
6    {{ 'slider-slick.js' | asset_url | script_tag }}
{{ 'slider-slick.css' | asset_url | stylesheet_tag }}と    {{ 'slider-slick.js' | asset_url | script_tag }}は任意のファイル名に変更してくださいね。

今回作成したcssとjsファイル

今回作成したhtml、css、jsをご紹介しておきます。参考になればうれしいです。

slickのためのstyle

1/*==================================================
2スライダーのためのcss
3===================================*/
4 .slider-show {
5    width:100%;
6    margin:0 auto;
7   text-align:center;
8}
9.slider-show li{
10   /* スライド画像同士の余白 */
11    margin:0 15px;
12}
13.slider-show img { 
14    width:100%;
15    /* 画像の高さを自動調整 
16    height: 380px;*/
17    /*画像サイズそのままサイズ表示*/
18     height:auto;
19    object-fit: cover;
20    object-position: 50% 50%;
21} 
22

slickのためのjs

1  $('.slider-show').slick({
2       autoplaySpeed:2000,
3       speed:3000,
4       autoplay:true,
5      lazyLoad: 'ondemand',
6       slidesToShow:2,
7       slideToscroll:1,
8       arrows:false,
9       dots:true,
10       centerMode: true, //要素を中央寄せ
11       centerPadding: '10%',//左右の画像が見える幅
12    responsive: [
13    {
14      breakpoint: 769,//モニターの横幅が769px以下の見せ方
15      settings: {
16        slidesToShow: 1,//スライドを画面に2枚見せる
17      },
18    },
19    {
20      breakpoint: 426,//モニターの横幅が426px以下の見せ方
21      settings: {
22        slidesToShow: 1,//スライドを画面に1.5枚見せる
23      },
24    },
25    ],
26});

slickの使い方

slick事態はオプションがいくつかあり、様々なスタイルで使用可能です。こちらのページでオプションを紹介していますので、ご参考にしてください。

あわせて読みたい
つらつら流れる、横に流れ続けるスライドショーの作り方【Slick&WordPressを利用】
つらつら流れる、横に流れ続けるスライドショーの作り方【Slick&WordPressを利用】

slick表示時のHTMLについて

liquidの記載のため、変数はそのままになっています。9行目〜32行目がスライドショーの範囲になります。

<li><img src=”画像のURL”></li>を繰り返し、スライド画像を表示します。

※blockを複数作り、case文で出し分けていますが、今回は長くなるので、block1の場合のみを掲載しています。

1<div class="page-width" style="margin-bottom:2%">
2	<div class="lp-container"> 
3		
4		<!--タイトル-->
5		<h3 class="index-main-section__title">{{ section.settings.s-heading }}</h3>
6		<!--概要-->
7		<p style=" font-size: 1.4rem; margin-bottom: 6%;">{{ section.settings.s-text }}</p>
8		
9		<!--スライドショー箇所-->
10		<ul class="slider-show" style="padding:0;">	
11			{% for block in section.blocks %}
12			{% case block.type %}
13			{% when 'block1' %}
14
15			<li style="list-style:none;">
16			<img src="{{ block.settings.block1-img | img_url: 'master' }}" alt="" />
17			<h4>{{ block.settings.block1-title }}</h4>
18			<h4  class="recommend-desc" style="text-align:left;">
19				{{ block.settings.block1-text }}
20			</h4>
21			<p style="font-size: .8em; border-bottom: 1px dotted #cccccc;">Recommended detergent</p>
22
23			<div class="container-product">
24				<div class="image-container" style="margin: 0 auto;">
25					<a href="{{ block.settings.block1-link1 }}"><img src="{{ block.settings.block1-imgp1 | img_url: 'master' }}" alt="" /></a>
26				</div>
27			</div>
28			</li>
29			
30			{% endcase %}
31			{% endfor %}
32		</ul> 
33		
34	</div><!--//lp-container-->
35</div><!--//page-width-->
36
Google広告
ABOUT ME
にゃん花子
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します
Google検索
記事URLをコピーしました