Swiper v10

2023年7月3日

新しくなったSwiper v10を発表できることを嬉しく思います。このリリースで導入された主な新機能を見ていきましょう。

Swiper Element

Swiper Webコンポーネントには多くの改善が施されています。

Shadow DOM内のコンテナ

まず、メインのSwiperコンテナ要素をShadow DOMに移動しました。これにより、3Dエフェクトの3Dパースペクティブに関するいくつかの問題（特にSafariで）を修正できます（Safariのバグにより、Cubeはまだ正しく表示されません）。

v9の場合

<swiper-container>
  <!-- shadow -->
  <div class="swiper-wrapper">
    <slot />
  </div>
</swiper-container>

v10の場合

<swiper-container>
  <!-- shadow -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <slot />
    </div>
  </div>
</swiper-container>

Swiper Elementは、以前使用されていたアイコンフォントの代わりに、ナビゲーションボタンにSVG要素を使用するようになりました。これにより、特定のコンテンツセキュリティポリシーに対応できるはずです。

属性内のJSON

バージョン10では、Swiper ElementはObjectを受け取ることが期待される属性でJSONをサポートしています。例えば

<swiper-container breakpoints='{"768": {"slidesPerView": 3}}'>
  ...
</swiper-container>

推奨はされておらず、パラメータをpropsとして渡す方が良いでしょう。

Swiper Elementのスタイル

Swiper Webコンポーネントは、グローバルスタイルをドキュメントに挿入しなくなりました。この場合、カスタムのナビゲーション、ページネーション、スクロールバー要素を使用すると、それらはスタイル設定されません。

パッケージ構造

v10の主な破壊的な変更は、パッケージ構造が簡略化されたことです。

ほとんどのファイル（モジュールを除く）は、パッケージのルートに配置されるようになりました。
.esm.jsスクリプトは.mjsに置き換えられました。
.browser.esm.jsスクリプトは、同じ.mjsになりました。

詳細については、v10移行ガイドをご覧ください。

モジュールのインポート

ツリーシェイキングを改善するために、すべてのモジュールは/swiper/modulesからインポートする必要があります。

v9の場合

import Swiper, { Navigation, Pagination } from 'swiper';

v10の場合

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

ブラウザモジュール

これで、ESモジュールを使用して、必要なものだけをブラウザで直接使用できます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/modules/navigation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.css" />

<div class="swiper">...</div>

<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper.min.mjs'
  import Navigation from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/navigation.min.mjs'
  import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.mjs'

  const swiper = new Swiper('.swiper', {
    modules: [Navigation, Pagination],
    ...
  })
</script>

今後の予定

これは、最も重要な変更点と新機能の概要でした。

すべての変更点のリストについては、完全なv10の変更履歴を参照してください。

また、v10への移行ガイドを確認することをお勧めします。

追伸

そしていつものように、Swiperを気に入っていただけたら、寄付または誓約によってプロジェクトをサポートしてください。

Patreonで：https://www.patreon.com/swiperjs
Open Collectiveで：https://opencollective.com/swiper

プレミアムプロジェクトもチェックしてください。

皆様のサポートは私たちにとって大きな意味があります！

このページをGitHubで編集