스와이퍼 기본 튜토리얼(12)-HTML 튜토리얼-php.cn

스와이퍼 기본 튜토리얼(12)

黄舟

풀어 주다： 2017-01-20 15:31:13

원래의

1308명이 탐색했습니다.

이 섹션에서는 스와이프에서 내비게이션을 스크롤바 스타일로 변경하는 방법을 소개합니다.

먼저 스와이프 페이지의 기본 레이아웃을 구축합니다.

<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>
            <div class="swiper-scrollbar"></div>
        </div>

로그인 후 복사

그런 다음 JS 부분으로 이동하여 초기화 코드를 추가하세요.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                spaceBetween:30,
                grabCursor:true,
                slidesPerView:3,
                centeredSlides:true,
                scrollbar:&#39;.swiper-scrollbar&#39;, //绑定分页导航
                scrollbarHide:true  //开启导航在不活动时的隐藏
            });

로그인 후 복사

이 기사에서는 페이징 탐색의 swiper-container가 swiper-scrollbar로 변경된 다음 초기화 중에 탐색이 바인딩되는 것을 볼 수 있습니다. 그것은 달성될 수 있다. 물론 네비게이션 바 숨기기 효과를 끌 수도 있습니다

위는 swiper 기본 튜토리얼(12) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지( m.sbmmt.com)!