【2021年】swiper.jsの使い方【最新バージョン7.0】

swiper js

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をサイトに組み込むまでの流れは以下です。

必要なファイルをダウンロードしてページで読み込む(もしくはCDNで参照させる)
htmlを記述
javascriptを記述
必要に応じてオプションを指定
必要に応じてcssで調整

この記事を書いている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版」が入門書としてはオススメです。

確かな力が身につくJavaScript「超」入門 第2版
created by Rinker

逆引きできるコードレシピ集はこちらがオススメ。

JavaScript コードレシピ集
created by Rinker

jQueryのアニメーションのレシピ集ならこちらがおすすめ。

動くWebデザインアイディア帳
created by Rinker

  • 動画学習サイト「Udemy」で学ぶ

Udemyの「【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編) 」がオススメです。

JavaScriptの基礎から実践的な記述まで。フロントエンドエンジニアとして必要なスキルを、19時間という大ボリュームの講座にまとめています。

css(Animation)やSassの解説も含まれており「なんとなくできるけど、ちょっと不安。体系的に丸っと学びたい」という人におすすめです。

【Udemyがセール中(2021年9月20日(月)まで)】
対象コースが ¥1,610から。
Udemyでセール中のJavaScriptコースをすべてみる >>

  • オンラインスクールの「デイトラ」で学ぶ

デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。

デイトラのWeb制作コース」では、HTML/CSSの基礎からJavaScript、jQuery、Sass、WordPressの構築まで丸っと学ぶことができます。実際の現場で役立つスキルを提供しているのが特徴で、学習中は厳しい審査を突破した現役エンジニアやフリーランスがメンターとしてサポートしてくれます。

まとめ

この記事のポイントをまとめます。

・2021年8月時点でswiper.jsの最新バージョンは7
・バージョン6とバージョン7では動作に関わるクラス名が「swiper-container」から「swiper」に変わっているので注意
・特にCDNで最新版を読み込んでいるサイトは注意(クラス名を書き換えないとスライダーが動かない)

今回はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。