Heim > Artikel > Web-Frontend > Implementierung der Touch- und Slide-Funktion von Swiper 4.x basierend auf Inhalten auf dem mobilen Endgerät

Implementierung der Touch- und Slide-Funktion von Swiper 4.x basierend auf Inhalten auf dem mobilen Endgerät

php中世界最好的语言Original: 2018-05-28 15:46:522200Durchsuche

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!

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：So implementieren Sie die bidirektionale Bindung von Vue-DatenNächster Artikel：So implementieren Sie die bidirektionale Bindung von Vue-Daten

In Verbindung stehende Artikel

Mehr sehen