スライドショーを使うにゃんと役立つ!Wordpress手引き書サイトにゃんと役立つ!Wordpress手引き書サイト自分で更新できるワードプレスで自分だけのホームページの作り方やポイントを紹介中!非エンジニアのための、とっても役立つ、Wordpress手引き書サイトです。記事内に商品プロモーションを含む場合がありますSlickをShopifyで使うにゃん!今回はDawnで、Slickを使用しました。Slickの本家サイトにのっている方法では、Shopifyでは動かなかったので、設定方法をご紹介します。目次<head></head>に読み込むのはJqueryだけcdnとオリジナルcss、jsは</body>の直前で読み込む今回作成したcssとjsファイルslickのためのstyleslickのためのjsslickの使い方slick表示時のHTMLについてGoogle広告<head></head>に読み込むのはJqueryだけtheme.liquidファイルの</head>直前に、Jqueryを読み込みます。src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>cdnとオリジナルcss、jsは</body>の直前で読み込むtheme.liquidファイルの</body>直前に、cdnとご自身で用意したcssとjsファイルも読み込みます。}}は任意のファイル名に変更してくださいね。今回作成したcssとjsファイル今回作成したhtml、css、jsをご紹介しておきます。参考になればうれしいです。],26});slickの使い方slick事態はオプションがいくつかあり、様々なスタイルで使用可能です。こちらのページでオプションを紹介していますので、ご参考にしてください。あわせて読みたいつらつら流れる、横に流れ続けるスライドショーの作り方【Slick&WordPressを利用】slick表示時のHTMLについてliquidの記載のため、変数はそのままになっています。9行目〜32行目がスライドショーの範囲になります。src=”画像のURL”></li>を繰り返し、スライド画像を表示します。※blockを複数作り、case文で出し分けていますが、今回は長くなるので、block1の場合のみを掲載しています。役立つ!Wordpress手引き書サイト記事URLをコピーしました。