RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

スライダープラグインのswiperをnpm installで使う

CDN経由やダウンロードして使う方法ではなく、npmからswiperをインストールして使う方法です。最近のweb制作ではこの方法が普通じゃないでしょうか。

公式のドキュメント見て書いてるので、分かるよって人は公式のドキュメントから。この記事では覚書程度に必要なところを抜粋してます。

swiperjs.com

インストール

npmかyarnで

yarn add swiper

npm install swiper

JavaScript

ドキュメントに書かれてる通りこんな感じで。オプションはドキュメントを参照してください。 NavigationPagination を使いたい場合は以下のようにimportで読み込んで、 Swiper.use([Navigation]) で使ってください。あとCSSのimportも忘れずに。 v6とv7系で読み込み方がが変わってるので注意です。

Migration Guide to Swiper 7

import Swiper, { Navigation } from 'swiper'
// import Swiper styles v6
import 'swiper/swiper-bundle.css'

// import Swiper styles v7
import 'swiper/css'

Swiper.use([Navigation])

const swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1,
    centeredSlides: true,
    spaceBetween: 30,
    navigation: {
      nextEl: '.related-next',
      prevEl: '.related-prev'
    },
    breakpoints: {
      640: {
        slidesPerView: 3,
        spaceBetween: 10
      }
    }
  })

HTML

こちらは公式に書いてあるコードです。 classの swiper-containerswiper-wrapperswiper-slide は指定しましょう。prev、nextボタンなどは必ずしも swiper-container の中にある必要はありません。

<!-- Slider main container -->
<div class="swiper-container">
  <!-- 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>

エラーが出た場合

大したエラーではないですが、以下のようなエラーに遭遇したのでメモ

CSS Loader

JavaScriptでCSSをimportするのでstyle-loaderとcss-loaderが必要です。

ただし注意点としてはwebpackとのバージョンの兼ね合いがあるようです。 webpackが4系で "style-loader": "^2.0.0""css-loader": "^5.0.1" は動きました。もしくはcss-loaderが6系でwebpackは5系でも動くかもしれません(未検証ですが)

stackoverflow.com

yarn add style-loader css-loader

webpack.config.js

module: {
    rules: [
      // 省略
      {
        test: /\.css/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { url: false }
          }
        ]
      }
    ]
  }

さいごに

あまり詳しく調べてないですが、jQuery不要なスライダープラグインはswiperが良さそうですね。