2024年2月27日(火)2024年2月25日(日) 投稿者: iwbjp

Swiper(JavaScriptライブラリ)の間違った使い方

Swiperとは
Swiperの実装手順
パソコンではallowTouchMoveは無効を推奨
allowTouchMoveとkeyboardを設定する方法
他のライブラリでも問題が発生する

Swiperとは

Swiperはカルーセル（スライダー）を簡単に実装できるJavaScriptライブラリです。

カルーセルを0から制作すると1時間以上かかることがありますが、Swiperを使用すれば最短数分でカルーセルを実装できます。

Swiperは設定できるオプションが多く、様々な形のカルーセルを作成可能です。

そのため、多くのWebサイトで使用されています。

Swiper - The Most Modern Mobile Touch Slider

Swiperの実装手順

1. CSSとJavaScriptを読み込む

CDNで使用する場合は以下のSwiperのCSSとJavaScriptを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

npmの場合はnpm install swiperでインストールして、CSSとJavaScriptをインポートします。

npm install swiper

import Swiper from 'swiper'
import 'swiper/css'

const swiper = new Swiper(...)

2. HTMLを用意する

例としてスライドが3つあるシンプルなものを作成しますので、HTMLを以下のようにします。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

3. カルーセルのCSSを作成

今回は600 x 400のシンプルなカルーセルを作成します。

.swiper {
  width: 600px;
  height: 400px;
  border: 1px solid;
  box-sizing: border-box;
}

.swiper-slide {
  display: grid;
  place-items: center;
  font-size: 3rem;
}

4. カルーセルのJavaScriptを作成

new Swiperでカルーセルの要素を指定して、loopをtrueに設定。

あとはページネーションとナビゲーションの要素を以下のように指定すれば完成です。

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

Swiperで作成したカルーセルのサンプル(allowTouchMoveなし)

パソコンではallowTouchMoveは無効を推奨

SwiperではallowTouchMoveというスワイプした際に次および前に遷移する機能がデフォルトで有効になっています。

これはパソコンでもデフォルトで有効になっており、パソコンで有効になっているとカルーセルの要素内にデバイスフォントが存在している場合は、テキスト部分の選択ができなくなるデメリットがあります。

そのため、例えば「結婚指輪物語」の公式サイトなどのSwiperを使用しているWebサイトではテキスト部分が選択できなくなっています。

TVアニメ「結婚指輪物語」公式サイト

テキスト部分を選択できないとコピーや検索などができなくなるのでユーザーにとっては不便です。

この問題はSwiperのオプションでallowTouchMoveをfalseにすれば解決できます。

allowTouchMoveとkeyboardを設定する方法

テキスト選択不可の問題を解決するにはユーザーエージェントでデバイスを判定してBoolean値をallowTouchMoveに指定すれば実装できます。

パソコンのときにallowTouchMoveをfalseにすると、マウスで左右でスワイプのようにドラッグして切り替えることができなくなります。

しかし、パソコンの場合はそのようなマウス操作は操作性の向上にならないので無効にしても問題ありません。

ちなみにSwiperはキーボードの左右のキー（← →）で次・前に遷移する機能がデフォルトでは無効化されています。

こちらは操作性の向上のために有効化することをオススメします。

パソコンの場合のallowTouchMoveとkeyboardを設定したコードは以下の通りです。

const ua = navigator.userAgent.toLowerCase()
const isAllowTouch = /android|ipod|ipad|iphone|macintosh/.test(ua) && 'ontouchend' in document
const swiper = new Swiper('.swiper', {
  loop: true,
  allowTouchMove: isAllowTouch,
  keyboard: {
    enabled: !isAllowTouch,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})