Basic use of swiper (7)

In this lesson we introduce the automatic grouping + centered content of the swiper page.

The first step is to create a basic swiper page

<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>

After that, we use the selector to set the width of the page to be different (so that we can see the effect of automatic grouping )

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%;
            }

After that, go to the js code to initialize and add attributes

<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>

We can find through the attributes added in js that we only group the attributes The value changes to 'auto', and then just turn on the attribute of centering the slide page. How about it? Is it very simple?

The above is the basic use of swiper (7). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!