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

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

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

<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('.swiper-container',{
                spaceBetween:30,
                grabCursor:true,
                slidesPerView:3,
                centeredSlides:true,
                scrollbar:'.swiper-scrollbar', //绑定分页导航
                scrollbarHide:true  //开启导航在不活动时的隐藏
            });

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

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