swiper.jsの使い方を知りたい。
ネットの情報が古くて困っているので、2021年8月時点での最新バージョン7.0の使い方を知りたい。
あと、バージョン6系から7系に変える際の注意点も教えて欲しい。
こんなことを考えている方へ。
この記事のポイントは以下です。
・最新バージョン7.0のswiper.jsの使い方
・バージョン6とバージョン7では動作に関わるクラス名が「swiper-container」から「swiper」に変わっているので注意
・特にCDNで最新版を読み込んでいるサイトは注意（クラス名を書き換えないとスライダーが動かない）
この記事を書いている私は大阪在住のフリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトやECサイトを作ったり、サイト分析をしたり、PMOとして開発案件に参画したり、ブログを書いたりして生活しています。
先日こんなツイートをしました。
この記事では上記のツイートを掘り下げます。
【2021年】swiper.jsの使い方【最新バージョン7.0】
swiper.jsをサイトに組み込むまでの流れは以下です。
この記事を書いている2021年8月26日時点でswiper.jsの最新バージョンは7.0です。
動作に関わるクラス名が「swiper-container」から「swiper」に変わっています。CDNを使っている場合、これが原因でスライダーが機能しなくなっているサイトがいつくかあると思います。
必要なファイルのダウンロード
CDNで使う場合はこちら。
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>以下の公式サイトに詳しい説明があります。
CDNは簡単ですが、常に最新バージョンを参照するので、今回のようなクラス名の変更の影響をモロに受けます。知らないうちに仕様が変わっていてスライダーが機能しなくなっていた・・・なんてこともあります。
それが嫌なら、ローカルでファイルを準備する必要があります。
以下のリンクからcss、jsそれぞれダウンロードできます。
右上のプルダウンでダウンロードしたいバージョンを選択できます。
基本のhtmlレイアウト
バージョン6以前との大きな違いは、挙動に関わるクラス名が「swiper-container」から「swiper」に変わったことです。
すでにCDNでswiper.jsを読み込んでいるサイトの場合、クラス名を書き換えないとswiperが機能しなくなっています。
バージョン7.0での基本のhtmlレイアウトは以下です。
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>基本のJavaScript
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});必要に応じてオプションを指定
必要に応じてオプションを指定します。
オプション（parameter）の一覧は公式を参照ください。
必要に応じてcssで調整
公式で、
In addition to Swiper’s CSS styles, we may need to add some custom styles to set Swiper size:
https://swiperjs.com/get-started
と説明されている通り、swiper（ver6系までのswiper-container）のサイズを調整する場合はcssを記述します。
.swiper {
width: 600px;
height: 300px;
}バージョン6からバージョン7への変更点
この記事を書いている2021年8月26日時点でswiper.jsの最新バージョンは7.0です。
バージョン6とバージョン7では動作に関わるクラス名が「swiper-container」から「swiper」に変わっています。
赤字になっている部分が変わっています。
- 6系
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
...
</div>
</div>- 7系
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
...
</div>
</div>CDNを使ってswiper.jsを実装しているサイトは、クラス名を「swiper-container」から「swiper」に変える必要があります。
変えないとswiper.jsが機能しません。
バージョン6（および6以前）→バージョン7への移行ガイドは、公式の以下のページに記載されています。
参考リンク
JavaScript・jQueryのおすすめ勉強法まとめ
JavaScript・jQueryを勉強するのにおすすめな手段をまとめました。
- 本で学ぶ
「確かな力が身につくJavaScript「超」入門 第2版」が入門書としてはオススメです。
逆引きできるコードレシピ集はこちらがオススメ。
jQueryのアニメーションのレシピ集ならこちらがおすすめ。
- 動画学習サイト「Udemy」で学ぶ
Udemyの「【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
」がオススメです。
JavaScriptの基礎から実践的な記述まで。フロントエンドエンジニアとして必要なスキルを、19時間という大ボリュームの講座にまとめています。
css（Animation）やSassの解説も含まれており「なんとなくできるけど、ちょっと不安。体系的に丸っと学びたい」という人におすすめです。
【Udemyがセール中（2022年7月28日（木）まで！】
対象コースが ￥1,480から。
Udemyでセール中のJavaScriptコースをすべてみる >>
- オンラインスクールの「デイトラ」で学ぶ
デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。
「デイトラのWeb制作コース」では、HTML/CSSの基礎からJavaScript、jQuery、Sass、WordPressの構築まで丸っと学ぶことができます。実際の現場で役立つスキルを提供しているのが特徴で、学習中は厳しい審査を突破した現役エンジニアやフリーランスがメンターとしてサポートしてくれます。
まとめ
この記事のポイントをまとめます。
・2021年8月時点でswiper.jsの最新バージョンは7
・バージョン6とバージョン7では動作に関わるクラス名が「swiper-container」から「swiper」に変わっているので注意
・特にCDNで最新版を読み込んでいるサイトは注意（クラス名を書き換えないとスライダーが動かない）
今回はここまでです。
