スワイパーの基本的な使い方 (16)

このコンテンツでは、スワイパーページでのページめくりアニメーション-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>

次に初期化して、jsでページめくりアニメーションを追加します。これも属性ですが、少し異なります。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                grabCursor:true,
                effect:'cube',  //翻页效果：方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });

直接追加された属性に加えて、ページめくりアニメーションには、ここにある独自の属性もあります

cube:{
                    shadow:true,   //阴影效果，如果设置为false下面的就不用
                    slideShadows:true,  //页面阴影效果
                    shadowOffset:20,  //阴影的偏移值
                    shadowScale:0.94  //阴影的大小
                }

このようにして、3D 正方形のページめくり効果が実現されます

上記は基本ですスワイパーの使用 (16) 関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。