スワイパーの基本的な使い方(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')を追加するだけです

以上がスワイパー(15)の基本的な使い方です。詳細については、PHP 中国語 Web サイト (www.php.cn) のコンテンツにご注意ください。