> 웹 프론트엔드 > HTML 튜토리얼 > 스와이프의 기본 사용법 (14)

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

黄舟
풀어 주다: 2017-01-20 15:38:54
원래의
1249명이 탐색했습니다.

이번 콘텐츠에서는 스와이퍼 페이지에서 루프 모드를 활성화하는 방법을 소개하겠습니다.
먼저 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(&#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  //开启循环属性
            });
로그인 후 복사

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

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


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿