Swiper_v7をnpmパッケージでインストールし、初期設定方法と使い方を解説していきたいと思います。

Swiper_v7をインストールする

公式のInstallationで書かれているnpm run swiperを組み込みたいサイトのsourceディレクトリで行ってください。
この時インストールされたswiperのバージョンが7系であることを、package.jsonで確認してください。
Swiperは開発スピードが速くメジャー・マイナーを含めバージョンのアップデートの頻度が高いため、
設定方法が変わっている場合があります。
そのため、バージョンの確認はしっかりしてください。

Swiperを読み込む

SwiperのJSファイルを読み込む

Swiperはいろいろな機能が実装されているため、
基本となるコアの部分と機能の部分は別々に実装されており、
必要に応じて機能を読み込まなければなりません。
よく使う機能としては以下のようなものがあります。

• Navigation（左右ボタン）
• Pagination（ページ位置表示）
• Autoplay（自動再生）
• Fade Effect（切り替えアニメーション）

実際に読み込む方法を見ていきましょう。

//- コア部分のみを読み込んだ状態
import Swiper from 'swiper';

//- Navigation, Pagination を追加で読み込んだ状態
import Swiper, { Navigation, Pagination } from 'swiper';

機能を追加で読み込んだだけでは動かないので、Swiperの本体に読み込ませる必要があります。

//- Swiper_v6 で読み込ませる方法
Swiper.use([Navigation, Pagination]);

//- Swiper_v7 で読み込ませる方法
new Swiper('.my-swiper', {
  modules: [Navigation, Pagination],
});

公式にも記載されていますが、Swiper_v6 で読み込ませる方法は Swiper_v7 でもまだサポートされており有効です。

これでJSファイルの読み込みは完了です。

SwiperのCSSファイルを読み込む

Swiper の styleファイルは様々なファイルが用意されています。

• swiper-bundle.css
• swiper-bundle.min.css
• swiper.less
• swiper.scss
• swiper.min.css

一つづつどんなファイルなのかを記載していきます。

swiper-bundle.css

Swiperのコア（本体）部分と全ての機能のスタイルをまとめたファイル。

swiper-bundle.min.css

Swiperのコア（本体）部分と全ての機能のスタイルをまとめてminify（圧縮）したファイル。

swiper.less

Less記法で書かれたSwiperのコア（本体）部分のみ記述されたlessファイル。

swiper.scss

SCSS記法で書かれたSwiperのコア（本体）部分のみ記述されたscssファイル。

swiper.min.css

Less記法 もしくは SCSS記法をコンパイルしたcssファイル。内容はSwiperのコア（本体）部分のみ。

実際にSwiperのstyleファイルを読み込んでみる

cssファイルに読み込む場合（SCSS,LESSを使用しているのが前提です）

//- 全ての機能のスタイルが読み込まれます
@import "~swiper/swiper-bundle.min.css";
//- 全ての機能のスタイルが読み込まれます
//- 未圧縮のため自身の設定よって圧縮されるされないが決まります。
@import "~swiper/swiper-bundle.css";

//- 機能ごとにスタイルを読み込む　※どのファイル(css, scss, less)を読み込むかは環境次第です。
//- まずは本体の読み込み
@import "~swiper/swiper.min.css";
@import "~swiper/swiper.scss or less";
//- 機能別の読み込み
//- Navigation
@import "~swiper/modules/navigation/navigation.min.css";
@import "~swiper/modules/navigation/navigation.scss or less";
//- Pagination
@import "~swiper/modules/navigation/pagination.min.css";
@import "~swiper/modules/navigation/pagination.scss or less";

JSファイルにstyleファイルを読み込む場合

//- 全ての機能のスタイルが読み込まれます
import 'swiper/css/bundle' // この時読み込まれるファイルは swiper-bundle.min.css が読み込まれています。

//- 機能ごとにスタイルを読み込む
//- まずは本体の読み込み
import 'swiper/css' // swiper.min.css
//- 機能別の読み込み
//- Navigation
import 'swiper/css/navigation' // swiper/modules/navigation/navigation.min.css
//- Pagination
import 'swiper/css/pagination' // swiper/modules/navigation/pagination.min.css

styleファイルのimportは必ず .min.css が読み込まれるようになっています。

構築環境が何かしらのフレームワーク（vue, react 等）を使っている場合には、
フレームワークの環境設定がよしなに処理を行い、上記の方法で何事もなく読み込まれますが、
フレームワークを何も使用していない場合には、
webpack.config.js へ cssファイル を取り込むことを明示してあげないと、
読み込み→スタイル適用まで行われることはありません。

では、webpack.config.js に何を記述すればいいのかは下記になります。

module: {
  rules: [
    ... ,
    //- ここから
    {
      test: /\.css$/i,
      use: ["style-loader", "css-loader"],
    },
    //- ここまで
    ...
  ]
}

rulesの中に記載したのちに、useに style-loader, css-loader を使うと記載されているので、
２つの loader をインストールしていない場合はnpm i style-loader css-loaderを行ってください。

Swiperを使ってみる

実際にどのように記述するかを記載していきます。
実装する内容は、
　・ページ切り替え（左右）ボタン
　・カレントページ表示
　・自動再生機能
の３機能です。

  

    
Slide 1
    
Slide 2
    
Slide 3
  

  


  

  

import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';
Swiper.use([Navigation, Pagination, Autoplay]); //- Swiper_v6 の書き方の方が慣れているのでv６の方法です。

const swiperOptions = {
  loop: true,
  autoplay: {
    delay: 5000,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
}
const swiper = new Swiper('.swiper', swiperOptions);

@import "~swiper/swiper";
@import "~swiper/modules/navigation/navigation";
@import "~swiper/modules/navigation/pagination";
@import "~swiper/modules/autoplay/autoplay";

これでデフォルトのスタイルが当たったSwiperの実装が完了しました。
細かいカスタマイズ方法についてはいろいろなサイトで解説されていますし、
公式サイトのAPI Documentでもくわしく記載されているので、そちらを参照してください。