SwiperSwiperv11.1.1

スライドスロット v10.1.0

2023年8月1日

問題

Safariブラウザの最新のすべてのバージョンには、スロットのカスタム要素に渡された要素を正しく3D変換しないバグ（#6650）があります。

これにより、キューブ、カバーフロー、（おそらく）クリエイティブエフェクトなど、3D変換を使用するSwiperエフェクトが誤って表示されます。

<swiper-container effect="cube">
  <!-- "perspective" prop can't be applied to these slides -->
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper-container>

解決策

Swiper v10.1.0では、この問題を回避するためにスライドスロットを導入しました。この場合、swiper-containerにスライド自体ではなく、その内容のみを入れます。

<swiper-container effect="cube">
  <!-- Content goes to the first slide (with index 0) -->
  <div slot="slide-0">Slide 1</div>
  <!-- Content goes to the second slide (with index 1) -->
  <div slot="slide-1">Slide 2</div>
  <!-- Content goes to the third slide (with index 2) -->
  <div slot="slide-2">Slide 3</div>
</swiper-container>

Swiperコンポーネントは、渡されたスライドスロットを持つ要素の数を動的にチェックし、必要な数のスライドを自動的に作成します。使用するスライドスロットの数に制限はありません。

ただし、この場合はスライドのスタイルを再検討する必要があります。スライド要素がDOMに直接存在せず、スライド自体がシャドウDOM内にあるためです。

そのため、スライドコンテンツにはカスタムラッパーを使用することをお勧めします。例:

<swiper-container effect="cube">
  <!-- Content goes to the first slide (with index 0) -->
  <div slot="slide-0" class="slide-content">
    <img class="slide-image" src="path/to/slide-image.jpg" />
    <div class="slide-title">Slide 1</div>
  </div>
  <!-- Content goes to the second slide (with index 1) -->
  <div slot="slide-1" class="slide-content">
    <img class="slide-image" src="path/to/slide-image.jpg" />
    <div class="slide-title">Slide 2</div>
  </div>
  <!-- Content goes to the third slide (with index 2) -->
  <div slot="slide-2" class="slide-content">
    <img class="slide-image" src="path/to/slide-image.jpg" />
    <div class="slide-title">Slide 3</div>
  </div>
  ...
</swiper-container>
<style>
  /* make sure slide content takes all available slide size */
  .slide-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  /* slide image */
  .slide-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* slide title */
  .slide-title {
    color: #fff;
    position: absolute;
    left: 32px;
    bottom: 32px;
    font-weight: bold;
    font-size: 32px;
  }
</style>

これで、すべてが（Safariで）正しく機能します。

追伸

そしていつもどおり、Swiperが気に入ったら、ご寄付またはプレッジによってプロジェクトをサポートしてください。

そして私たちのプレミアムプロジェクトをチェック

あなたのサポートは私たちにとって非常に重要です!

GitHubでこのページを編集