스와이프의 기본 사용법 (14)

이번 콘텐츠에서는 스와이퍼 페이지에서 루프 모드를 활성화하는 방법을 소개하겠습니다.
먼저 14~13번의 세션을 통해 축적된 스킬을 활용하여 기본 스와이퍼 레이아웃을 구축해 보겠습니다. 그리고 필요에 따라 CSS 스타일을 설정하세요.

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

그런 다음 js로 이동하여 페이지와 루프 속성(루프: true)을 초기화합니다.

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

완료 후 페이지를 계속 넘길 수 있습니다. 3박3일 지치지 않고 놀자!

위는 swiper(14)의 기본 사용법입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!