swiper

Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit JavaScript erstellt wurde und auf Mobiltelefone, Tablets und andere mobile Endgeräte abzielt.

Swiper kann gängige Effekte wie Touchscreen-Fokusbild, Touchscreen-Tab-Umschaltung, Touchscreen-Mehrbildumschaltung usw. erzielen.

Swiper ist Open Source, kostenlos, stabil, einfach zu bedienen und leistungsstark. Es ist eine wichtige Wahl für die Erstellung von Websites für mobile Endgeräte!

1. Erstellen Sie zunächst eine Swiper-Betriebsumgebung. Die erforderlichen Dateien sind swiper.min.js und swiper.min.css.

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

Nach dem Login kopieren

　　<script src="path/to/swiper.min.js?1.1.10"></script>

Nach dem Login kopieren

</html>

Nach dem Login kopieren

2. HTML-Inhalt schreiben.

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

Nach dem Login kopieren

3 Du möchtest vielleicht eine Größe für Swiper definieren, aber natürlich nicht.

.swiper-container {
　　width: 600px;
　　height: 300px;
}

Nach dem Login kopieren

4. Swiper initialisieren: vorzugsweise neben dem -Tag (Funktionsaufruf)

<script>

Nach dem Login kopieren

　var swiper= new Swiper('.swiper-container',{
　　autoplay:1000,//Automatisches Karussell
　　autoplayDisableOnInteraction:false,//Weiterscrollen nach dem Schieben
　　loop:true,///Loop
　　Paginierung : '.swiper-pagination',//pagination
　　paginationClickable:true,//kleiner Punktklick
　　spaceBetween:30,///Bildlücke
　　direction:"horizontal"//Standard horizontal vertikal
})

</script>
</body>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in das Swiper-Plug-in und wie man Bilder karussellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!