スワイパーの基本的な使い方(10)

このレッスンでは、スワイパーページの複数行表示を紹介します。

このレッスンでは、swiper での Swiper ネストを紹介します。

今回の最初のステップは少し異なりますが、スワイパー ページを構築する必要がありますが、スワイパー ページのスライドにスワイパーがネストされています。

<div class="swiper-container swiper-container-h">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
                <div class="swiper-container swiper-container-v">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div>
                        <div class="swiper-slide">Vertical Slide 4</div>
                        <div class="swiper-slide">Vertical Slide 5</div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-h"></div>
    </div>

今回は、swiper-container-h というクラス名が swiper の外部コンテナに追加されていることがわかります。実際、どのクラス名が外部コンテナであるかを記録するためのマークとして選択できます。初期化中にスワイパー ページの外部コンテナをバインドする必要があります。複数のスワイパー ページがある場合は、それらを複数回初期化する必要があり、それ以外の場合は、それぞれの初期化を別のスワイパー ページの外部コンテナにバインドする必要があります。ページのスタイルが崩れてしまうので、以下で初期化します。

var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });

スワイパー ページが 2 つあるため、それぞれを 2 回初期化します。次に、各スワイパー ページの CSS スタイルと各スワイパー ページの属性を設定する必要があります。バインドされた外部コンテナ クラス名は同じである必要があることに注意してください。そうでない場合、ページが 2 回初期化されるとスタイルの混乱が発生します。

上記は swiper (10) の基本的な使い方です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。