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

이번에는 스와이퍼 페이지의 페이지 넘김 애니메이션 - 그라데이션 효과를 소개합니다
페이지 넘김 효과가 있기 때문에 이 기능도 스와이퍼에 패키징되어 있어서 사용하고 있습니다. 매우 편리해집니다.
먼저 기본 레이아웃과 CSS 스타일 설정을 합니다.

<div class="swiper-container">
        <div class="swiper-wrapper">
            <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 swiper-pagination-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>

애니메이션 효과를 더욱 확실하게 보여주기 위해 각 슬라이드에 배경 이미지를 추가했습니다.
그런 다음 JS에서 초기화하고 페이지 넘김 애니메이션 속성을 추가합니다.

 var swiper = new Swiper('.swiper-container',{
            pagination:'.swiper-pagination',
            paginationClickable:true,
            nextButton:'.swiper-button-next',
            prevButton:'.swiper-button-prev',
            effect:'fade'   //动画效果：渐变
        });

이렇게 하면 그라데이션 페이지 넘김 애니메이션이 구현됩니다.

위의 속성(효과:'fade')만 추가하면 됩니다. swiper(15)의 기본 사용법입니다. 자세한 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!