Heim > Artikel > Web-Frontend > So implementieren Sie mit Swiper ein Seitenbildkarussell

So implementieren Sie mit Swiper ein Seitenbildkarussell

亚连Original: 2018-06-14 17:04:012259Durchsuche

Dieser Artikel stellt hauptsächlich die Wirkung von Bildkarussells auf mobilen Seiten vor, die auf Swiper basieren. Interessierte Freunde können sich auf die einfache Implementierung von Bildkarussells mit Swiper beziehen .

swiper

1. Hauptsächlich enthaltene Module:

swiper: bezieht sich auf Gleiten, Umschalten (das gesamte Gleitobjekt bezieht sich manchmal speziell auf den Prozess (Übergang), bei dem sich der Schieber nach dem Loslassen noch vorwärts bewegt, bis er an die Kante passt)

Container: Bezieht sich auf den Container (der Container des Swipers umfasst). die Sammlung von Folien (Wrapper), Paginierung, Vorwärtsschaltfläche usw.)

Wrapper: bezieht sich auf eine Sammlung von (berührten Objekten, berührbaren Bereichen und beweglichen Blöcken, die beim Wechseln der Folie während des Übergangs verschoben werden)
Slider: bezieht sich auf den Slider (einer der geschalteten Blöcke, kann Text, Bilder, HTML-Elemente oder einen anderen Swiper enthalten)
Paginierung: bezieht sich auf den Paginator (zeigt die Anzahl der Folien und die aktuell aktive Folie an)
aktiv : bezieht sich auf die aktive Folie, aktiviert (sichtbare Folie ist aktiv. Wenn mehr als eine sichtbare Folie vorhanden ist, ist standardmäßig die Folie ganz links aktiv)
Rückruf: bezieht sich auf die Rückruffunktion (wird unter bestimmten Umständen ausgelöst)

2. Einfaches Karussell

, wie unten gezeigt:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > 
 <script type="text/javascript" src="jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="swiper-3.2.7.min.js"></script> 
</head> 
<body> 
<p class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式--> 
 <p class="swiper-wrapper"> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 </p> 
 <p class="swiper-pagination" style="width: 100px;float: right"></p><!--分页器-->、 
 <p class="swiper-button-prev"></p><!--前进按钮--> 
 <p class="swiper-button-next"></p><!--后退按钮--> 
</p> 
 
<script type="text/javascript"> 
 var mySwiper = new Swiper(".swiper-container",{ 
 direction:"horizontal",/*横向滑动*/ 
 loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/ 
 pagination:".swiper-pagination",/*分页器*/ 
 prevButton:".swiper-button-prev",/*前进按钮*/ 
 nextButton:".swiper-button-next",/*后退按钮*/ 
 autoplay:3000/*每隔3秒自动播放*/ 
 }) 
</script> 
</body> 
</html>

3. Andere Parameter in.js:

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*轮播的效果：（1）fade:淡入淡出；（2）cube:立方体；（3）coverflow:立体照片*/ 
 slidesPerView:3,/*网格分布：1为在容器区域出现一张图；2：在容器区域出现两张图；3：在容器区域出现三张图*/ 
 centeredSlides:true,/*默认第一块居左，设置为true后则是居中显示*/ 
 coverflow:{ 
  rotate:30,/*3d旋转角度设置为30度*/ 
  stretch:10,/*每个slide之间的拉伸值，值越大靠得越近*/ 
  depth:60,/*位置深度，值越大离Z轴越远，看起来越小*/ 
  modifier:2, 
  slideshadows:true/*开启阴影*/ 
 } 
 })

Hinweis: Vor der Verwendung von Swiper muss Swiper eingeführt werden .css, swiper.js und jQuery

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Wie implementiert man eine auf Ereignisse reagierende Fortschrittsbalkenkomponente?

Informationen zur Verwendung von Dom-Elementen in jQuery ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Swiper ein Seitenbildkarussell. 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 verwenden Sie Bus in der Vue-KomponentenkommunikationNächster Artikel：So verwenden Sie Bus in der Vue-Komponentenkommunikation

In Verbindung stehende Artikel

Mehr sehen