Swiper API 日本語ドキュメント

公式

参考：

swiper.js6系使ってみたからそのオプションについて(v6.0.4) | なんかいろいろデザインする人

3系swiper、4系swiperのオプション記事を以前書いたんだけど、また久しぶりに公式見たら6系まで進んで

reiwinn-web.net

Swiper のHTML部分

<!-- 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>

Styles　（翻訳省略）

Swiper package contains different sets of CSS, Less and SCSS styles:

CSS Styles

CSS styles for bundle version:

• swiper-bundle.css - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)
• swiper-bundle.min.css - same as previous but minified

CSS styles for core version and modules:

• swiper.min.css - only core Swiper styles
• components/a11y/a11y.min.css - styles required for A11y module
• components/controller/controller.min.css - styles required for Controller module
• components/effect-coverflow/effect-coverflow.min.css - styles required for Coveflow Effect module
• components/effect-cube/effect-cube.min.css - styles required for Cube Effect module
• components/effect-fade/effect-fade.min.css - styles required for Fade Effect module
• components/effect-flip/effect-flip.min.css - styles required for Flip Effect module
• components/lazy/lazy.min.css - styles required for Lazy module
• components/navigation/navigation.min.css - styles required for Navigation module
• components/pagination/pagination.min.css - styles required for Pagination module
• components/scrollbar/scrollbar.min.css - styles required for Scrollbar module
• components/thumbs/thumbs.min.css - styles required for Thumbs module
• components/zoom/zoom.min.css - styles required for Zoom module

Less Styles

Less styles are separate styles for core version and modules:

• swiper.less - only core Swiper styles
• components/a11y/a11y.less - styles required for A11y module
• components/controller/controller.less - styles required for Controller module
• components/effect-coverflow/effect-coverflow.less - styles required for Coveflow Effect module
• components/effect-cube/effect-cube.less - styles required for Cube Effect module
• components/effect-fade/effect-fade.less - styles required for Fade Effect module
• components/effect-flip/effect-flip.less - styles required for Flip Effect module
• components/lazy/lazy.less - styles required for Lazy module
• components/navigation/navigation.less - styles required for Navigation module
• components/pagination/pagination.less - styles required for Pagination module
• components/scrollbar/scrollbar.less - styles required for Scrollbar module
• components/thumbs/thumbs.less - styles required for Thumbs module
• components/zoom/zoom.less - styles required for Zoom module

SCSS Styles

SCSS styles are also separate styles for core version and modules:

• swiper.scss - only core Swiper styles
• components/a11y/a11y.scss - styles required for A11y module
• components/controller/controller.scss - styles required for Controller module
• components/effect-coverflow/effect-coverflow.scss - styles required for Coveflow Effect module
• components/effect-cube/effect-cube.scss - styles required for Cube Effect module
• components/effect-fade/effect-fade.scss - styles required for Fade Effect module
• components/effect-flip/effect-flip.scss - styles required for Flip Effect module
• components/lazy/lazy.scss - styles required for Lazy module
• components/navigation/navigation.scss - styles required for Navigation module
• components/pagination/pagination.scss - styles required for Pagination module
• components/scrollbar/scrollbar.scss - styles required for Scrollbar module
• components/thumbs/thumbs.scss - styles required for Thumbs module
• components/zoom/zoom.scss - styles required for Zoom module

Initialize Swiper　（翻訳省略）

Now, when we have Swiper's HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters)- initialize swiper with options

• swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
• parameters - object - object with Swiper parameters. Optional.
• Method returns initialized Swiper instance

For example:

const swiper = new Swiper('.swiper-container', {
  speed: 400,
  spaceBetween: 100,
});

After you initialize Swiper it is possible to access to Swiper's instance on its HTMLElement. It is swiper property of Swiper's HTML container element:

const swiper = document.querySelector('.swiper-container').swiper;

// Now you can use all slider methods like
swiper.slideNext();

Parameters

Let's look on list of all available parameters:

const swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  // using "ratio" endpoints
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});

Methods & Properties

スライダーを初期化すると、初期化されたインスタンスが変数（上記の例ではswiper変数）に格納され、便利なメソッドやプロパティが用意されます。:

addSlide(1, '<div class="swiper-slide">Slide 10"</div>')

addSlide(1, [
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);

appendSlide('<div class="swiper-slide">Slide 10"</div>')

appendSlide([
 '<div class="swiper-slide">Slide 10"</div>',
 '<div class="swiper-slide">Slide 11"</div>'
]);

prependSlide('<div class="swiper-slide">Slide 0"</div>')

prependSlide([
 '<div class="swiper-slide">Slide 1"</div>',
 '<div class="swiper-slide">Slide 2"</div>'
]);

removeSlide(0); // remove first slide
removeSlide([0, 1]); // remove first and second slides
removeAllSlides();    // Remove all slides

Events

Swiperには、便利なイベントがたくさん付いています。イベントは2つの方法で割り当てることができます。

1. Using on parameter on swiper initialization:

const swiper = new Swiper('.swiper-container', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

2. Using on method after swiper initialization.

const swiper = new Swiper('.swiper-container', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed');
});

const swiper = new Swiper('.swiper-container', {
  init: false,
  // other parameters
});
swiper.on('init', function() {
 // do something
});
// init Swiper
swiper.init();

// Otherwise use it as the parameter:
const swiper = new Swiper('.swiper-container', {
  // other parameters
  on: {
    init: function () {
      // do something
    },
  }
});

Modules

Navigation

Navigation Parameters

const swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Navigation Methods

Navigation Events

Pagination

Pagination Parameters

const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

const swiper = new Swiper('.swiper-container', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

const swiper = new Swiper('.swiper-container', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});

const swiper = new Swiper('.swiper-container', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});

const swiper = new Swiper('.swiper-container', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});

Pagination Methods

Pagination Events

Scrollbar

Scrollbar Parameters

const swiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

Scrollbar draggable element CSS class

Scrollbar Methods

Scrollbar Events

Autoplay （自動再生）

Autoplay Parameters

const swiper = new Swiper('.swiper-container', {
 autoplay: {
   delay: 5000,
 },
});

<!-- このスライドだけ遅延時間を2秒にする -->
<div class="swiper-slide" data-swiper-autoplay="2000">

Autoplay Methods

Autoplay Events

Parallax（視差効果）

パララックス（parallax）は英語で「視差」という意味があります。ざっくりというと「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。Webデザインでは、スクロール効果としてパララックスがよく取り入れられます。

Parallax scrolling header-CodePen

 緑の部分と、背後の黒の部分で動くスピードが違うことが分かるかと思います。このように差をつけることで、奥行き感を出したり、目を引くようなデザインにすることができる…というわけです。

https://saruwakakun.com/html-css/reference/parallax

Swiperは、swiper/slidesのネストされた要素のパララックス遷移効果をサポートしています。サポートされているパララックス要素のタイプは2つあります。

• swiper-containerの直接の子要素です。このような要素の視差効果は、全体のスライダーの進行状況に依存します。視差のある背景に便利
• スライドの子要素。このような要素の視差効果は、スライドの進行状況に依存します。

視差効果を有効にするには、parallax:trueパラメータを渡してSwiperを初期化し、必要な要素に以下のいずれか（または混合）の属性を追加する必要があります:

• data-swiper-parallax - transform-translate parallax transition（視差効果のあるパララックス遷移？）を可能にします. この属性は以下の値を指定できる:
  • number - 進行状況に応じて要素を移動させるために、px単位の値（上記の例ではタイトル、サブタイトルのように）を指定します。この場合、この要素は、スライドの位置（次または前）に応じて±pxの値で移動します。
  • percentage - (parallax-bgと同様)を使用すると、進行状況やサイズに応じて要素が移動します。この場合、要素は、スライドの位置（次または前）に応じて、そのサイズ（水平方向の幅と垂直方向の高さ）の ±割合で移動されます。つまり、要素の幅が400pxで、data-swiper-parallax="50%"を指定した場合、要素は±200pxの範囲で移動します。
• data-swiper-parallax-x - data-swiper-parallaxと同じだが、X軸だけ違う
• data-swiper-parallax-y - Y軸が違う
• data-swiper-parallax-scale -視差要素が "inactive"（アクティブなスライド上にない）状態にあるときの、視差要素のスケール比。
• data-swiper-parallax-opacity - パララックス要素が "inactive"（アクティブなスライド上にない）状態にあるときの不透明度
• data-swiper-parallax-duration -パララックス要素のカスタムトランジションデュレーション

data-swiper-parallaxはスライドした時に移動する距離を設定。数、もしくはパーセントで設定。
data-swiper-parallax-x、data-swiper-parallax-yで縦軸横軸を設定。
data-swiper-parallax-scaleでアクティブじゃないスライドの大きさを指定。
data-swiper-parallax-opacityでアクティブじゃないスライドの透明度を指定。
data-swiper-parallax-durationで推移時間をカスタムで指定。

<div class="swiper-container">
  <!-- Parallax background element -->
  <div
    class="parallax-bg"
    style="background-image:url(path/to/image.jpg)"
    data-swiper-parallax="-23%"
  ></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Each slide has parallax title -->
      <div class="title" data-swiper-parallax="-100">Slide 1</div>
      <!-- Parallax subtitle -->
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <!-- And parallax text with custom transition duration -->
      <div
        class="text"
        data-swiper-parallax="-300"
        data-swiper-parallax-duration="600"
      >
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <!-- Opacity parallax -->
      <div data-swiper-parallax-opacity="0.5">I will change opacity</div>
      <!-- Scale parallax -->
      <div data-swiper-parallax-scale="0.15">I will change scale</div>
    </div>
    ...
  </div>
</div>

Parallax Parameters

const swiper = new Swiper('.swiper-container', {
  parallax: true,
});

Lazy Loading （遅延読み込み）

遅延読み込みを可能にするためには、まず、スライドで背景を持つ画像や要素のための特別なレイアウトが必要になります。

preloadImages: false,
lazy: true

preloadImages: false,
lazy: {
  loadPrevNext: true
}

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Lazy image -->
    <div class="swiper-slide">
      <img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
      <div class="swiper-lazy-preloader"></div>
    </div>

    <!-- Lazy image with srscet-->
    <div class="swiper-slide">
      <img
        data-src="path/to/logo-small.png"
        data-srcset="path/logo/logo-large.png 2x"
        class="swiper-lazy"
      />
      <div class="swiper-lazy-preloader"></div>
    </div>

    <!-- Element with lazy background image -->
    <div class="swiper-slide">
      <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>

    <!-- Lazy background image on slide itself -->
    <div
      data-background="path/to/picture-3.jpg"
      class="swiper-slide swiper-lazy"
    >
      <div class="swiper-lazy-preloader"></div>
    </div>
  </div>
</div>

以下を御覧ください:

• 遅延読み込みされた画像/要素は、それぞれ "swiper-lazy "クラスを追加する必要があります。
• 要素のレイジーイメージソースは、"src "ではなく "data-src "属性で指定する必要があります。
• 要素のレイジーイメージのソースセットは、"srcset "ではなく "data-srcset "属性で指定する必要があります。
• data-background "属性にレイジーバックグラウンドの画像ソースを指定する必要があります。

また、画像が読み込まれた後に自動的に削除されるアニメーションのプリローダースピナーをスライドに追加することもできます。:

<div class="swiper-lazy-preloader"></div>

Or 暗いレイアウトには白いものを：

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

その後、Swiperの初期化時にレイジーローディングを有効にする必要があります :

const swiper = new Swiper('.swiper-container', {
  // Disable preloading of all images
  preloadImages: false,
  // Enable lazy loading
  lazy: true,
});

もしslidesPerView: auto'またはslidesPerView > 1を使用している場合は、watchSlidesVisibilityも有効にする必要があり、Swiperは現在表示されているスライドで画像を読み込みます。

Lazy Loading Parameters

const swiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});

Lazy Loading Methods

Lazy Loading Events

Fade Effect （フェード効果）

スライドが横（縦）方向にずれるスライドではなく、フェードインでのスライドになる

この機能を利用するには、effectパラメータが 'fade' に設定されている必要があります。後ろや下にコンテンツが表示されないようにするには、crossFade をtrueに設定する必要があります。

Fade Effect Parameters

const swiper = new Swiper('.swiper-container', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});

Coverflow Effect

立体的なやつが横に並ぶやつ。

この機能を有効にするには、 effectパラメータを 'coverflow'に設定する必要があります。

Coverflow Effect Parameters

const swiper = new Swiper('.swiper-container', {
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

Flip Effect

くるって裏返したら次のスライドになるやつ。カードゲームのオープニングにあるやつって言えばなんとなく伝わりそう。

この機能を利用するには、 effectパラメータを「フリップ」に設定する必要があります。

Flip Effect Parameters

const swiper = new Swiper('.swiper-container', {
  flipEffect: {
    slideShadows: false,
  },
});

Cube Effect

直方体が回転するみたいなスライドになる。極力スライドさせる画像は正方形の方がきれい。

この機能を有効にするには、 effect paramを 'cube' に設定する必要があります。

Cube Effect Parameters

const swiper = new Swiper('.swiper-container', {
  cubeEffect: {
    slideShadows: false,
  },
});

Thumbs　（サムネイル）

var thumbs = new Swiper('#thumbs',{
    spaceBetween: 5,
    slidesPerView: 5,
    watchSlidesVisibility: true,
})
var gallerySwiper = new Swiper('#view',{ //メインスワイパー
    thumbs: {
        swiper: thumbs,//このthumbsをサムネイルとして使うよと指定。
    }
})

コントローラコンポーネントに加えて、SwiperにはThumbsコンポーネントが付属しています。これは、2つのスワイパーを同期させるために使用されるコントローラよりも、より正しい方法で追加の親指スワイパーと連携するように設計されています。

Thumbs Parameters

const swiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

Thumbs Methods

Zoom

ダブルタップ・ダブルクリックでズームしたり、ピンチイン・ピンチアウトでズームしたりできる。

.swiper-zoom-containerで囲むする必要がある。data-swiper-zoomを使えば個別に最大倍率を操作できる。

Swiperは、ピンチジェスチャーで画像を拡大したり、ダブルタップで画像を拡大/縮小したりできるズームイメージ機能をサポートしています（iOSで1枚の写真を閲覧するときに表示されるものと同様です）。この場合、追加のレイアウトが必要です:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image2.jpg" />
      </div>
    </div>
    <div class="swiper-slide">Plain slide with text</div>
    <div class="swiper-slide">
      <!-- Override maxRatio parameter -->
      <div class="swiper-zoom-container" data-swiper-zoom="5">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
  </div>
</div>

• すべての "zoomable "画像は、swiper-zoom-containerクラスのdivでラップする必要があります。.
• デフォルトでは、img、picture、canvasのいずれかの要素をズームすることになっています。もし、他のカスタム要素でズームさせたい場合は、swiper-zoom-targetクラスをこの要素に追加してください。例↓

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <!-- custom zoomable element -->
        <div
          class="swiper-zoom-target"
          style="background-image: url(...)"
        ></div>
      </div>
    </div>
  </div>
</div>

• ズームコンテナのdata-swiper-zoom属性を使って、特定のスライドのmaxRatioパラメータをオーバーライドすることができます。

Zoom Parameters

const swiper = new Swiper('.swiper-container', {
  zoom: {
    maxRatio: 5,
  },
});

Zoom Methods

Zoom Events

Keyboard Control キーボード操作

キーボードでスライダーを操作できるようにする。

Keyboard Control Parameters

const swiper = new Swiper('.swiper-container', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});

Keyboard Control Methods

Keyboard Events

Mousewheel Control　マウスホイール操作

マウスホイールでスライダーを操作できるようにする。

Mousewheel Control Parameters

const swiper = new Swiper('.swiper-container', {
  mousewheel: {
    invert: true,
  },
});

Mousewheel Control Methods

Mousewheel Events

Virtual Slides

スライドしたい要素が大量にある（100とか200とか）ある場合、流石に重い。

そうした時に、アクティブなスライドとその前後だけを読み込みDOMに追加し、次へボタンが押されたりしたらその次のスライドの前後だけを読み込みDOMに追加、前のスライドの前後にあったものはDOMから削除するとしたら軽くなる。それをしてくれるオプション。

書くと果てしなく長くなりそうだから省略。

Virtual Slides module allows to keep just required amount of slides in DOM. It is very useful in terms in performance and memory issues if you have a lot of slides, especially slides with heavyweight DOM tree or images.Note that according to Virtual Slides realization it doesn't work with loop mode, slidesPerColumn more than 1 and slidesPerView: 'auto'

Virtual Slidesモジュールは、DOMに必要な量のスライドだけを保持することができます。Virtual Slidesは、ループモード、slidesPerColumnが1以上、slidesPerView: 'auto'では動作しないことに注意してください。

Virtual Slides Parameters

const swiper = new Swiper('.swiper-container', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});

Virtual Slides Methods

renderExternal Example

renderExternal はスライドのレンダリングを他のライブラリにバイパスすることができ、React.jsやVue.jsのようなライブラリでは非常に便利です。

With Vue.js

<template>
  <!-- ... -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- It is important to set "left" style prop on every slide -->
      <div
        class="swiper-slide"
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="slideStyles"
      >
        {{slide}}
      </div>
    </div>
  </div>
  <!-- ... -->
</template>
<script>
  import Swiper from 'swiper/bundle';

  export default {
    data() {
      return {
        // dummy slides data
        slides: (function () {
          var slides = [];
          for (var i = 0; i < 600; i += 1) {
            slides.push('Slide ' + (i + 1));
          }
          return slides;
        })(),
        // virtual data
        virtualData: {
          slides: [],
        },
      };
    },
    computed: {
      slideStyles() {
        return `left: ${this.virtualData.offset}px;`;
      },
    },
    mounted() {
      const self = this;
      const swiper = new Swiper('.swiper-container', {
        // ...
        virtual: {
          slides: self.slides,
          renderExternal(data) {
            // assign virtual slides data
            self.virtualData = data;
          },
        },
      });
    },
  };
</script>

With React.js

import React from 'react';
import Swiper from 'swiper/bundle';

export default class extends React.Component {
  constructor() {
    this.state = {
      // dummy slides data
      slides: (function () {
        var slides = [];
        for (var i = 0; i < 600; i += 1) {
          slides.push('Slide ' + (i + 1));
        }
        return slides;
      }()),
      // virtual data
      virtualData: {
        slides: [],
      },
    }
  }
  componentDidMount() {
    const self = this;
    const swiper = new Swiper('.swiper-container', {
      // ...
      virtual: {
        slides: self.state.slides,
        renderExternal(data) {
          // assign virtual slides data
          self.setState({
            virtualData: data,
          });
        }
      },
    });
  }
  render() {
    {/* ... */}
    <div className="swiper-container">
      <div className="swiper-wrapper">
        {/* It is important to set "left" style prop on every slide */}
        {this.state.virtualData.slides.map((slide, index) => (
          <div className="swiper-slide"
            key={index}
            style={{left: `${virtualData.offset}px`}}
          >{slide}</div>
        ))}
      </div>
    </div>
    {/* ... */}
  }
}

Hash Navigation　ハッシュ

各スライドにdata-hash=”slide1″のような感じでdata-hashを設置すると、url#slide1といったurlでdata-hashが一致するところからスライドが始まる。

ハッシュナビゲーションは、特定のスライドへのリンクを持ち、特定のスライドを開いた状態でページをロードできるようにすることを目的としています。

動作させるには、hashNavigation:trueパラメータを渡して有効にし、data-hash属性にスライドハッシュを追加する必要があります。:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-hash="slide1">Slide 1</div>
    <div class="swiper-slide" data-hash="slide2">Slide 2</div>
    <div class="swiper-slide" data-hash="slide3">Slide 3</div>
    <div class="swiper-slide" data-hash="slide4">Slide 4</div>
    <div class="swiper-slide" data-hash="slide5">Slide 5</div>
    ...
  </div>
</div>

const swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashNavigation: true,
});

Hash Navigation Parameters

const swiper = new Swiper('.swiper-container', {
  hashNavigation: {
    replaceState: true,
  },
});

Hash Navigation Events

History Navigation

スライドする度にURLを書き換える。ちょっと何に使うかわからないですね。

History Navigation Parameters

const swiper = new Swiper('.swiper-container', {
  history: {
    replaceState: true,
  },
});

<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>

Controller

複数スライダーがある時に、片方のスライダーを操作したらもう片方のスライダーも一緒に動くようにしたい！そんな願いを叶えます。
２つの場合はこんなん。

それより多いならこっちのがいいかも。

後からこれで追加もできる。

inverse: trueだと動きが逆になる。デフォルトではfalse。

Swiper2の実行前（Swiper2の行まで実行されていない）に、Swiper1の中で、Swiper2に関するコントローラー処理をやってもうまく行かない。

[Rails]Swiperで画像スライド作成 - Qiita

#完成イメージ#Swiperとはスライダー（カルーセル）が作れるJavaScriptライブラリです。しかもPCでもスマホでも使えて、レスポンシブ対応可能！引用元…

qiita.com

 

    var mySwiper1 = new Swiper('.swiper1', {
　　　　　省略。ここでcontroller...mySwiper2は定義しない
    });
    var mySwiper2 = new Swiper('.swiper2', {
        slideToClickedSlide: true, // スライドクリックでそのスライドに移動する
        centeredSlides: true, // センター表示
        slidesPerView: 3, // 一度に表示するスライド数を指定
        controller: {
            control: mySwiper1, // 連動させるSwiperの定義名を指定
            by: 'slide',  // 連動Swiperをスライド単位で制御
        },
    });
    mySwiper1.controller.control = mySwiper2; //mySwiperを実行したあとで、このコードを実行しなければならない。

Controller Parameters　コントローラ

const swiper = new Swiper('.swiper-container', {
  controller: {
    inverse: true,
  },
});

Controller Methods

Accessibility (a11y)

音声やスクリーンリーダーを使用するなら。

Accessibility Parameters

const swiper = new Swiper('.swiper-container', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});

Custom Build

You have two options of making custom version of Swiper.

Using JS Modules

If you use bundler with JS modules support in your project you can import only the modules you need:

// Import Swiper and modules
import SwiperCore, { Navigation, Pagination, Scrollbar } from 'swiper/core';

// Install modules
SwiperCore.use([Navigation, Pagination, Scrollbar]);

// Now you can use Swiper
const swiper = new Swiper('.swiper-container', {
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

The following modules are exported:

• Swiper - core library
• Virtual - Virtual Slides module
• Keyboard - Keyboard Control module
• Mousewheel - Mousewheel Control module
• Navigation - Navigation module
• Pagination - Pagination module
• Scrollbar - Scrollbar module
• Parallax - Parallax module
• Zoom - Zoom module
• Lazy - Lazy module
• Controller - Controller module
• A11y - Accessibility module
• History - History Navigation module
• HashNavigation - Hash Navigation module
• Autoplay - Autoplay module
• EffectFade - Fade Effect module
• EffectCube - Cube Effect module
• EffectFlip - Flip Effect module
• EffectCoverflow - Coverflow Effect module
• Thumbs - Thumbs module

Using Build Script

Swiper comes with gulp builder that allows to build custom library version where you may include only required modules. We need the following:

1. Download and unzip Swiper GitHub repository to local folder
2. Install Node.js (if not installed)
3. Now, we need to install required dependencies. Go to the folder with downloaded and unzipped Swiper repository and execute in terminal:$ npm install
4. Open scripts/build-config.js file:module.exports = { // remove components you don't need components: [ 'virtual', 'keyboard', 'mousewheel', 'navigation', 'pagination', 'scrollbar', 'parallax', 'zoom', 'lazy', 'controller', 'a11y', 'history', 'hash-navigation', 'autoplay', 'effect-fade', 'effect-cube', 'effect-flip', 'effect-coverflow', 'thumbs', ], // default color of navigation elements themeColor: '#007aff', // additional color to be included colors: { white: '#ffffff', black: '#000000', }, };
5. Now, we are ready to build custom version of Swiper:$ npm run build:prod
6. That is all. Generated CSS and JS files and their minified versions will be available in package/ folder.

TypeScript Definitions

Swiper (since version 6) is fully typed, it exports Swiper and SwiperOptions types:

// main.ts
import { Swiper, SwiperOptions } from 'swiper';

const swiperParams: SwiperOptions = {
  slidesPerView: 3,
  spaceBetween: 50,
};

const swiper = new Swiper('.swiper-container', swiperParams);

You can also check auto generated TypeScript definitions explorer for all the types, options, properties and methods.