Dieses Mal werde ich Ihnen die Implementierung der Touch- und Slide-Funktion basierend auf dem Inhalt in Swiper 4.x auf dem mobilen Endgerät vorstellen. Was sind die Vorsichtsmaßnahmen, die Swiper 4 hat? Das Folgende ist eine praktische Fall, werfen wir einen Blick darauf.
Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit Javascript für mobile Endgeräte wie Mobiltelefone und Tablets erstellt wurde.
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. Laden Sie zunächst das Plug-in. Die erforderlichen Dateien sind swiper.min.js und swiper.min.css. Sie können Swiper-Dateien herunterladen oder ein CDN verwenden.
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" > </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html>
2.HTML-Inhalt.
<p class="swiper-container"> <p class="swiper-wrapper"> <p class="swiper-slide">Slide 1</p> <p class="swiper-slide">Slide 2</p> <p class="swiper-slide">Slide 3</p> </p> <!-- 如果需要分页器 --> <p class="swiper-pagination"></p> <!-- 如果需要导航按钮 --> <p class="swiper-button-prev"></p> <p class="swiper-button-next"></p> <!-- 如果需要滚动条 --> <p class="swiper-scrollbar"></p> </p> 导航等组件可以放在container之外
3. Möglicherweise möchten Sie eine Größe für Swiper definieren, aber natürlich nicht.
.swiper-container {
width: 600px;
height: 300px;
}4. Swiper initialisieren: Am besten neben dem -Tag platzieren
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>Wenn es nicht hinter den HTML-Inhalt geschrieben werden kann, muss es danach initialisiert werden Die Seite wird geladen (nicht empfohlen).
<script type="text/javascript">
window.onload = function() {
...
}
</script>Oder so (Jquery und Zepto)
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So erstellen Sie eine Webpack+React-Entwicklungsumgebung
So erstellen Sie eine React-Familien-Bucket-Umgebung
Das obige ist der detaillierte Inhalt vonImplementierung der Touch- und Slide-Funktion von Swiper 4.x basierend auf Inhalten auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
