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

이 콘텐츠에서는 스와이퍼의 페이지 넘기기 효과---3D 뒤집기 효과를 계속 소개합니다

먼저 스와이퍼 페이지를 빌드하고 CSS 스타일을 설정하여 효과를 확인합니다. 슬라이드에 배경 이미지를 추가합니다.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="logo.png"></div>
                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

그런 다음 js 부분으로 이동하여 페이지 넘김 효과를 추가하고 초기화합니다.

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                grabCursor:true,   //抓手光标开启
                effect:'flip'   //翻转效果：3D翻转

이런 3D 페이지 넘김 효과가 있는 페이지가 완성되었습니다

위는 스와이퍼(18)의 기본 사용법입니다. 자세한 내용은 PHP 중국어를 참고해주세요. 넷(www.php.cn)!