이 콘텐츠에서는 스와이퍼 페이지에 제어 버튼을 추가하는 방법을 소개합니다(이전 페이지와 다음 페이지로의 전환을 제어할 수 있음).
먼저 기본 스와이퍼 페이지 레이아웃을 구축합니다. 그런 다음 주로 페이지 넘김 버튼(.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 중국어 홈페이지(m.sbmmt.com)!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
