![見出し画像](https://assets.st-note.com/production/uploads/images/103194208/rectangle_large_type_2_9c7195b96417473938ea751365684e85.png?width=1200)
[Shopify]Swiper.jsでおしゃれなスライドセクションを作ってみるPart1(Dawn)86/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日はSwiperのCDN でおしゃれなスライドセクションを作ってみます。PCは左側がテキストエリアでふんわりしたから文字が表示されて、右側に画像がフェイドでスライド表示されます。SPは画像上でテキストエリアが下に来るようにしてみました^^
対象テーマ:Dawn
✔︎今日のゴール
![](https://assets.st-note.com/img/1681653416505-1BtdpF00lI.png?width=1200)
![](https://assets.st-note.com/img/1681653420687-Rn3mJjf4oW.png?width=1200)
◆CMS特徴
![](https://assets.st-note.com/img/1681653852542-iTK8vQ1XIn.png?width=1200)
![](https://assets.st-note.com/img/1681653884057-hWzB9lgpe4.png?width=1200)
![](https://assets.st-note.com/img/1681653943553-sb76YRqp92.png?width=1200)
![](https://assets.st-note.com/img/1681653982085-WYMHSgfyn0.png?width=1200)
✔︎設定手順
◆事前準備 Swiper.jsのCDN を挿入
管理画面>テーマ>コード編集>レイアウト>theme.liquidを開く
下記のCDN のタグを</header>の直前にコピペ。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
ここから先は
6,873字
この記事が気に入ったらサポートをしてみませんか?