Utilisation de base du swiper (7)

Dans cette leçon, nous introduisons le regroupement automatique et le contenu centré des pages swiper.

La première étape consiste à créer une page swiper de base

<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>
            <div class="swiper-pagination"></div>
        </div>

Après cela, nous utilisons le sélecteur pour définir la largeur de la page pour qu'elle soit différente (afin que nous puissions regarder l'Effet de regroupement automatique)

body{
                margin:0;
                padding:0;
                background:#F2F2F2;
            }
            .swiper-container{
                width:100%;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                width:60%;
                font-size:18px;
                text-align:center;
                justify-content:center;
                align-items:center;
                display:flex;
                background:#fff;
            }
            .swiper-slide:nth-child(2n){   //设定页面不同的宽度
                width:40%;
            }
            .swiper-slide:nth-child(3n){
                width:20%;
            }

Ensuite allez dans le code js pour initialiser et ajouter des attributs

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                slidesPerView:&#39;auto&#39;,
                spaceBetween:30,
                centeredSlides:true
            });
        </script>

On peut le découvrir grâce aux attributs ajouté dans js, changez simplement la valeur de l'attribut de regroupement en « auto », puis activez l'attribut centré sur la page de diapositive.

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