SwiperSwiperv11.1.1

WebflowにおけるSwiperスライダー

2023年8月1日

Webflowには組み込みのスライダーがありますが、Swiperが提供するものには遠く及びません。この記事では、最高のクラスのスライダーを実現し、ページを際立たせるために、SwiperをWebflowサイトに統合する方法について説明します。

コレクション

まず、WebflowのCMS機能を使用したいので、スライドを含むコレクションを作成する必要があります。「Movies Sliders」という単純なコレクションを作成し、追加のtitleとimageフィールドを追加しました。

次に、スライダーを配置したい場所にコレクションを追加し、

ソースとして「Movies Sliders」コレクションを選択します。

次に、Swiperに必要なレイアウトに合わせるために、Collection List Wrapper、Collection List、Collection Itemにクラスを追加する必要があります。

  • Collection List Wrapper -> .swiper.swiper-movies（初期化のために追加クラスswiper-moviesを使用します）
  • Collection List -> .swiper-wrapper
  • Collection Item -> .swiper-slide

スライド画像

スライドに必要なレイアウトを設定したら、スライドにImage要素を追加し、「Movies Slidersから画像を取得」をチェックし、画像ソースとしてimageフィールドを選択します。

そして、画像にswiper-slide-imageクラスを追加します。

スライドタイトル

ここで設定する最後のものは、スライドタイトルです。画像と同様に、スライドにText要素を追加し、「Movies Slidersからテキストを取得」チェックボックスをチェックし、titleフィールドを選択します。

そして、テキストにswiper-slide-titleクラスを追加します。

Swiperアセットの追加

次に、Swiperのスタイルシートとスクリプトを追加する必要があります。

ページ設定の「カスタムコード」セクションで、次のコードを追加します。

  • <head>タグ内にSwiperのスタイルシートを追加します。 
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
  • </body>タグの前にSwiperのスクリプトを追加します。 
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

スタイル

基本設定が完了したら、デザイナーでSwiperコンポーネントに戻り、スタイルを適用します。

Collection List Wrapper / swiper

Collection List / swiper-wrapper

Collection Item / swiper-slide

Image / swiper-slide-image

Text / swiper-slide-title

初期化

最後に、Swiperを初期化する必要があります。ページ設定のカスタムコードセクションに戻り、「</body>タグの前に」セクションを次のように変更します。

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  const swiper = new Swiper('.swiper-movies', {
    effect: 'coverflow',
    centeredSlides: true,
    slidesPerView: 1,
    loop: true,
    createElements: true,
    pagination: true,
    autoplay: true,
    breakpoints: {
      640: {
        slidesPerView: 2,
      },
    },
  });
</script>

<head>タグ内のセクションを編集することで、Swiperのデフォルトのページネーションを調整することもできます。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<style>
  :root {
    --swiper-pagination-color: #000;
  }
</style>

結果

その結果、Webflowウェブサイトに素晴らしいスライダーができました。

追伸

そして、いつも通り、Swiperがお気に召したら、寄付または支援することでプロジェクトを支援してください。

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

皆様の支援は、私たちにとって大きな力になります！

GitHubでこのページを編集する