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>
<script src="path/to/swiper.min.js?1.1.10"></script>
</html>
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>
3 Du möchtest vielleicht eine Größe für Swiper definieren, aber natürlich nicht.
.swiper-container {
width: 600px;
height: 300px;
}4. Swiper initialisieren: vorzugsweise neben dem
<script>
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>
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!
Was sind die JQuery-Plug-Ins?
Einführung in die Plug-Ins, die für die Ausführung von Java durch vscode erforderlich sind
Was tun, wenn im Skript der aktuellen Seite ein Fehler auftritt?
Was sind die kostenlosen Crawler-Tools?
Tutorial zur Cloud-Server-Nutzung
Der Unterschied zwischen Löschen und Löschen
So öffnen Sie PSD-Dateien
So lösen Sie das Problem, dass der Win10-Ordner nicht gelöscht werden kann
