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

このコンテンツでは、スワイパーページでループモードを有効にする方法を紹介します。
まず、14 回または 13 回のセッションで蓄積されたスキルを使用して、基本的なスワイパー レイアウトを構築しましょう。必要に応じて CSS スタイルを設定します。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

次に、jsに移動してページを初期化し、loop属性(loop:true)を追加します。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                slidesPerView:1,
                spaceBetween:30,
                loop:true  //开启循环属性
            });

完了後はページをめくり続けることができ、三日三晩プレイできるようになります。疲れた！

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