クイックスタート

インストール

npm

npm install @swiplus/core

CDN

<link rel="stylesheet" href="https://cdn.swiplus.dev/swiplus-core.css" />
<script type="module">
  import Swiper from 'https://cdn.swiplus.dev/swiplus-core.mjs';
  import { Navigation, Pagination } from 'https://cdn.swiplus.dev/modules/';
</script>

基本的な使い方

1. HTML を用意

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド 1</div>
    <div class="swiper-slide">スライド 2</div>
    <div class="swiper-slide">スライド 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

2. CSS を読み込む

<link rel="stylesheet" href="https://cdn.swiplus.dev/swiplus-core.css" />

3. JavaScript を書く

import Swiper from '@swiplus/core';
import { Navigation, Pagination } from '@swiplus/core/modules';

const swiper = new Swiper('.swiper', {
  modules: [Navigation, Pagination],
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
});

これだけで動作します。

次のステップ

• API リファレンス を読む
• ガイド を読み進める