Heim >Web-Frontend >js-Tutorial >Einführung in das Swiper-Plug-in und wie man Bilder karussellt

Einführung in das Swiper-Plug-in und wie man Bilder karussellt

PHP中文网Original: 2017-06-19 17:23:161758Durchsuche

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>

　　3989f20b29ca3784489ad4a92ad594dd2cacc6d41bbb37262a98f745aa00fbf0

73a6ac4ed44ffec12cee46588e518a5e

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 36cc49f0c466276486e50c850b7e4956-Tag (Funktionsaufruf)

3f1c4e4b6b16bbbd69b2ee476dc4f83a

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

2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956

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!

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

Vorheriger Artikel：Zusammenfassung der hochfrequenten Nutzung von ES6-String-ErweiterungenNächster Artikel：Zusammenfassung der hochfrequenten Nutzung von ES6-String-Erweiterungen

In Verbindung stehende Artikel

Mehr sehen