Home > Web Front-end > HTML Tutorial > Basic use of swiper (14)

Basic use of swiper (14)

黄舟
Release: 2017-01-20 15:38:54
Original
1254 people have browsed it

In this content, we introduce how to enable loop mode in the swiper page.
First, let us build a basic swiper layout using the skills accumulated in fourteen... or thirteen sessions. And set CSS styles as needed.

<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>
Copy after login

Then go to js to initialize the page, and add our loop attribute (loop: true).

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

After completion, we can keep flipping Page, I can play for three days and three nights without getting tired!

The above is the basic use of swiper (14). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template