Zenn
📖

Swiper:Getting Started With Swiperを日本語訳

2021/10/06に公開
Rails
日本語訳
swiper
tech

記事について

Getting Started With Swiper
この記事は公式ドキュメントを日本語化した内容になります。2021.10.6翻訳

インストール

Swiperをプロジェクトにinclude/importするには、いくつかの方法があります。

NPMによるインストール

NPMからインストール可能です。

$ npm install swiper

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';

const swiper = new Swiper(...);

デフォルトではSwiperは、追加モジュール（ナビゲーション、ページネーションなど）のないコアバージョンのみをエクスポートします。そのため、追加モジュールもインポートして設定する必要があります。

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

Swiperをすべてのモジュール(bundle)と一緒にインポートしたい場合は、swiper/bundleからインポートする必要があります。

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/css/bundle';

// init Swiper:
const swiper = new Swiper(...);

CDNによる導入

Swiperのファイルをプロジェクトに含めたくない場合は、CDNから利用することができます。以下のファイルが用意されています。

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

ESモジュールをブラウザで使用する場合は、そのためのCDN版もあります。

<script type="module">
  import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.min.js'

  const swiper = new Swiper(...)
</script>

ローカルへダウンロード

Swiperアセットをローカルで使用したい場合は、下記より直接ダウンロードすることができます。 https://unpkg.com/swiper@7/

Swiper HTMLレイアウト

次に、基本的なSwiperレイアウトをアプリに追加します。

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

Swiper CSSスタイル/サイズ

SwiperのCSSスタイルに加えて、Swiperのサイズを設定するためにいくつかのカスタムスタイルを追加する必要があるかもしれません。

.swiper {
  width: 600px;
  height: 300px;
}

Swiperの初期化

最後に、JSでSwiperを初期化する必要があります。

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

参考サイト

Getting Started With Swiper
Deepl翻訳

Discussion