Grundlegende Verwendung von Swiper (11)-HTML-Tutorial-php.cn

Grundlegende Verwendung von Swiper (11)

黄舟

Freigeben： 2017-01-20 15:30:06

Original

1396 Leute haben es durchsucht

In diesem Kapitel stellen wir den Greifcursor in Swiper vor, der den Stil unseres Cursors auf der Swiper-Seite ändern soll.

Der erste Schritt besteht darin, ein grundlegendes Swiper-Seitenlayout zu erstellen.

<body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

Nach dem Login kopieren

Vergessen wir nicht, die Seite zu gestalten, da ich zur Demonstration hier bin, ist es einfacher.

<style>
            body{
                margin:0;
                padding:0;
                background:#eee;
            }
            .swiper-container{
                width:300px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                font-size:18px;
                background:#fff;
                display:flex;
                text-align:center;
                justify-content:center;
                align-items:center;
            }
        </style>

Nach dem Login kopieren

Stellen Sie die Breite des äußeren Containers auf 100 % und die Höhe auf 300 Pixel ein.
Stellen Sie dann den Seiteninhalt so ein, dass er vertikal und horizontal zentriert ist.
Gehen Sie dann zur Initialisierung zum js-Teil.

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                spaceBetween:30,
                slidesPerView:3,
                grabCursor:true  //开启抓手光标
            });
        </script>

Nach dem Login kopieren

Hier stellen wir die Seitengruppierungsanzeige ein, sodass die Seitenbreite automatisch die Breite des externen Containers teilt und die Seitenhöhe immer noch 300 Pixel beträgt.
Dann ändern wir den Cursorstil in einen Handcursor und Sie können sehen, dass es sich immer noch um ein Attribut handelt und der Effekt erzielt wird, was sehr praktisch ist.

Das Obige ist der Inhalt der grundlegenden Verwendung von Swiper (11). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!