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

이 콘텐츠에서는 스와이퍼 페이지에 제어 버튼을 추가하는 방법을 소개합니다(이전 페이지와 다음 페이지로의 전환을 제어할 수 있음).

먼저 기본 스와이퍼 페이지 레이아웃을 구축합니다. 그런 다음 주로 페이지 넘김 버튼(.swiper-button-next/prev)의 div를 외부 컨테이너(.swiper-container)에 추가합니다.

<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 부분으로 이동하여 기능을 초기화하고 페이지 넘기기 버튼 클래스를 바인딩합니다.

rree

클래스 이름을 통해 컨트롤 버튼의 색상을 변경할 수 있습니다. 그리고 컨트롤 버튼은 속성이 변경됨에 따라 해당 스타일로 변경되거나 기능이 추가됩니다

위는 스와이퍼의 기본 사용 내용입니다(13). PHP 중국어 홈페이지(www.php.cn)!