Utilisation de base du swiper (9)

Dans cette leçon, nous introduisons l'affichage multiligne des pages swiper.

La première étape consiste à créer une page swiper de base. Mais cette fois, nous allons créer plus de diapositives.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
            </div>
            <div class=&#39;swiper-pagination&#39;></div>
        </div>

Après cela, nous allons sur js pour initialiser notre swiper

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
               pagination:&#39;.swiper-pagination&#39;,
               paginationClickable:true,
               spaceBetween:10,
               slidesPerView:3,
               slidesPerColumn:3   //将swiper页面多行显示为：3行
            });
        </script>

On voit que nous n'avons pas beaucoup changé cette fois. Le style d'implémentation consiste toujours à ajouter un. attribut lors de l'initialisation. ---------slidePerColumn
Généralement, cet attribut est utilisé en combinaison avec l'affichage de groupe. Il est également préférable d'ajouter des espaces entre les pages

Ce qui précède est l'utilisation de base de swiper (9). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !