【Swiper】慣性スライド（freeMode）をコピペで実装｜Swiper 14対応、スマホだけ動かす方法も

スライダーには、1枚ずつピタッと止まるものと、指を離したあとも勢いでスーッと流れ、指を置くとその場で止まるものがあります。後者のような動きを、この記事では慣性スライドと呼びます。スマホアプリの横スクロールの一覧でよく見る動きです。

この動きは、Swiperのfree mode（freeMode）というオプションを使うと、jQueryなしで数行で実装できます。

この記事の内容は、2026年10月時点の最新版Swiper 14.3.0で確認しています。オプションの初期値は、14.3.0のソースコードで確認したものです。

コピペで動くコード（Swiper 14）

下のコードをHTMLファイルとして保存し、同じ階層にimgフォルダを作って画像を置けば動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swiper freeMode</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css">
<style>
body { margin: 0; }
.swiper { padding: 24px 16px; }
.swiper-slide { width: 70%; }
.swiper-slide img { display: block; width: 100%; border-radius: 8px; }
</style>
</head>
<body>
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/slide01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/slide02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/slide03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/slide04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/slide05.jpg" alt=""></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  spaceBetween: 16,
  freeMode: true
});
</script>
</body>
</html>

ポイントは3つです。

freeMode: true：慣性スライドにする。初期値はfalse（1枚ずつ止まる）
slidesPerView: 'auto'：スライドの幅をCSSで決める。ここでは.swiper-slide { width: 70%; }で、次のスライドが少し見えるようにしている。「続きがある」と分かるので、横に流せることが伝わりやすい
swiper-bundleを読み込む：全機能入りの版なので、free modeもそのまま使える

対応ブラウザに注意：Swiper 14は、Chrome / Edge 110以降、Safari 16.4以降（iOS 16.4以降）、Firefox 110以降が対象です。それより古いブラウザに対応する必要がある場合は、公式の案内どおりv12を使います（URLのswiper@14をswiper@12に変えるだけで、コードはそのまま使えます）。

勢いや止まり方を調整する

freeModeにはtrueの代わりにオブジェクトを渡して、細かく調整できます。

const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  spaceBetween: 16,
  freeMode: {
    enabled: true,
    momentumRatio: 0.6,  // 指を離したあとに流れる距離（小さいほど短い）
    sticky: true         // 止まるときに、スライドの端にそろえる
  }
});

オプション	内容	初期値
`enabled`	free modeを使う	`false`
`momentum`	指を離したあとも勢いで流れる	`true`
`momentumRatio`	流れる距離の倍率。大きいほど遠くまで流れる	`1`
`momentumVelocityRatio`	流れる速さの倍率	`1`
`momentumBounce`	端まで来たときに跳ね返る	`true`
`momentumBounceRatio`	跳ね返りの強さ	`1`
`sticky`	止まるときにスライドの位置にそろえる	`false`

「流れすぎる」と感じたらmomentumRatioを小さく、「中途半端な位置で止まるのが気になる」ならsticky: trueにします。stickyを使うと、慣性で流れつつも、最後はスライドの端でピタッと止まるので、カードの一覧などで見た目が整います。

スマホのときだけスライダーにする

パソコンでは普通に横に並べて、スマホのときだけ慣性スライドにしたい、という要望はよくあります。画面幅を見て、スマホの幅になったらSwiperを作り、パソコンの幅になったら壊す（destroy）ようにします。

<div class="swiper js-sp-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">項目1</div>
    <div class="swiper-slide">項目2</div>
    <div class="swiper-slide">項目3</div>
    <div class="swiper-slide">項目4</div>
  </div>
</div>

/* スマホ：スライドの幅 */
.js-sp-swiper .swiper-slide { width: 70%; }

/* パソコン：4列に並べる */
@media (min-width: 768px) {
  .js-sp-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .js-sp-swiper .swiper-slide { width: auto; }
}

const mq = window.matchMedia('(max-width: 767px)');
let spSwiper = null;

function toggleSwiper() {
  if (mq.matches && !spSwiper) {
    // スマホの幅になったら作る
    spSwiper = new Swiper('.js-sp-swiper', {
      slidesPerView: 'auto',
      spaceBetween: 16,
      freeMode: true
    });
  } else if (!mq.matches && spSwiper) {
    // パソコンの幅になったら壊す
    spSwiper.destroy(true, true);
    spSwiper = null;
  }
}

mq.addEventListener('change', toggleSwiper);
toggleSwiper();

destroy(true, true)の2つ目のtrueは、Swiperが付けたインラインのスタイルを消す指定です。これで、パソコンの幅に戻したときにCSSの横並びがそのまま効きます。

以前この記事では、resizeイベントのたびにnew Swiper()を呼ぶコードを載せていましたが、これだと画面幅を変えるたびにSwiperが作られ続けるうえ、パソコンの幅に戻しても元に戻りませんでした。またjQueryの$を使っていたのにjQueryを読み込んでいなかったため、そのままでは動きませんでした。上のコードに差し替えています。

npmで使う場合

Viteなどのビルドツールを使っている場合は、npmから入れます。npm版は使う機能を自分で読み込む仕組みなので、free modeの読み込みを忘れないようにします。

npm install swiper

import Swiper from 'swiper';
import { FreeMode } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/free-mode';

const swiper = new Swiper('.swiper', {
  modules: [FreeMode],
  slidesPerView: 'auto',
  spaceBetween: 16,
  freeMode: true
});

modules: [FreeMode]を書き忘れると、エラーは出ずに、ただの1枚ずつ止まるスライダーになります。「freeMode: trueにしたのに慣性で流れない」ときは、まずここを確認してください。

よくある質問

Q. 1枚ずつ止まってしまい、流れません

A. swiper-bundleではなくswiper.min.js（機能なしの本体だけ）を読み込んでいるか、npm版でmodules: [FreeMode]を書き忘れている可能性があります。

Q. スライドの幅がおかしくなります

A. slidesPerView: 'auto'のときは、スライドの幅をCSSで指定する必要があります。.swiper-slideにwidthを指定してください。

Q. Swiper 8のコードはそのまま使えますか？

A. この記事の基本的なコード（freeModeなど）は、8から14まで書き方が変わっていません。ただし、メジャーバージョンの間でnpm版の読み込み方などが変わっているので、npmで使う古い記事のコードは、公式の移行ガイドも確認してください。v12からv14は、公式によるとコードの変更なしで上げられます。

ほかのスライダーと比べたい場合

jQueryを使っているサイトで手早く入れるならSlick、背景画像をズームしながら切り替えたいならVEGASが向いています。

公式のデモには、free mode以外にもたくさんの動きがあります。やりたい動きに近いものを探して、コードを元にするのが早いです。

まとめ

慣性スライドは、SwiperのfreeMode: trueで実装できる。jQueryは不要
slidesPerView: 'auto'とCSSのwidthで、次のスライドを少し見せると伝わりやすい
止まり方はsticky、流れる距離はmomentumRatioで調整する
スマホだけ動かすなら、matchMediaで作る・壊すを切り替える
npm版ではmodules: [FreeMode]を忘れない。Swiper 14は対応ブラウザが新しいものに限られる