Basic use of swiper (5)

This section explains how to display swiper pages in groups.
Sometimes only displaying one page on a screen cannot meet our development needs. Swiper packages a method of displaying a group of pages on one screen. You only need to add an attribute to the initialization of the swiper page.

The first step is to write a basic swiper page. 18bb7614196f7baab91b92810cbd2724

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

Then initialize the page in js and add attributes for better viewing effect.
We added a slide gap to the page.

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                slidesPerView:3,   //页面分组显示，这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

Of course, don’t forget to quote our framework file, so when you run our page, you will find that a group of our pages will be displayed on the current screen.

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