Grundlegende Verwendung von Swiper (8)

In dieser Lektion stellen wir den kostenlosen Modus der Swiper-Seite vor.

Der erste Schritt besteht darin, eine einfache Swiper-Seite zu erstellen.

<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 class="swiper-slide">H5EDU 7<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 8<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 9<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 10<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

Dann müssen wir bei der Initialisierung die Attribute unseres freien Modus hinzufügen

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                slidesPerView:3,
                spaceBetween:30,
                freeMode:true    //free模式开启
            });
        </script>

Nach der Implementierung sehen wir uns die Wirkung des freien Modus an Die Umblätterposition stoppt an jeder Position. Nicht mehr auf Seiten beschränkt

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