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

이번 강의에서는 스와이프 페이지의 무료 모드를 소개합니다.

첫 번째 단계는 기본 스와이퍼 페이지를 만드는 것입니다.

<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 class="swiper-slide">H5EDU 7<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 8<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 9<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 10<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

그런 다음 초기화 중에 무료 모드의 속성을 추가해야 합니다

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                slidesPerView:3,
                spaceBetween:30,
                freeMode:true    //free模式开启
            });
        </script>

구현 후 효과를 살펴보겠습니다. 어디에서나 중지할 때 페이지 넘김 위치. 더 이상 페이지에 국한되지 않습니다

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