Heim >Web-Frontend >HTML-Tutorial >Grundlegende Verwendung von Swiper (18)

Grundlegende Verwendung von Swiper (18)

黄舟
黄舟Original
2017-01-20 15:45:401244Durchsuche

In diesem Inhalt führen wir weiterhin den Umblättereffekt im Swiper ein – 3D-Flip-Effekt

Erstellen Sie zunächst die Swiper-Seite und legen Sie den CSS-Stil fest. Um den Effekt zu sehen, wird dieses Kapitel noch erläutert Fügt der Folie ein Hintergrundbild hinzu.

<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>

Gehen Sie dann zum js-Teil, um den Umblättereffekt hinzuzufügen und ihn zu initialisieren.

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

Dies vervollständigt eine Seite mit einem 3D-Flip-Effekt

Das Obige ist die grundlegende Verwendung von Swiper (18). Bitte achten Sie auf verwandte Inhalte der chinesischen PHP-Website ( www.php.cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn