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

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

php中世界最好的语言

Freigeben： 2018-05-28 15:46:52

Original

2258 Leute haben es durchsucht

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>

Nach dem Login kopieren

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之外

Nach dem Login kopieren

3. Möglicherweise möchten Sie eine Größe für Swiper definieren, aber natürlich nicht.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Oder so (Jquery und Zepto)

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

Nach dem Login kopieren

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!