Heim > Artikel > Web-Frontend > Beispiel für die Verwendung des adaptiven jQuery-Karussell-Plug-ins Swiper

Beispiel für die Verwendung des adaptiven jQuery-Karussell-Plug-ins Swiper

高洛峰Original: 2016-12-27 15:33:581743Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung des adaptiven jQuery-Karussell-Plug-ins Swiper. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der Beispielcode lautet wie folgt folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5自适应模板</title>
<link rel="stylesheet" href="swiper-3.3.1.min.css">
<style>
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>
</head>
<body>
<div>
  <div>
    <div><img  src="images/banner01.jpg" alt="Beispiel für die Verwendung des adaptiven jQuery-Karussell-Plug-ins Swiper" ></div>
    <div><img  src="images/banner02.jpg" alt="Beispiel für die Verwendung des adaptiven jQuery-Karussell-Plug-ins Swiper" ></div>
    <div><img  src="images/banner03.jpg" alt="Beispiel für die Verwendung des adaptiven jQuery-Karussell-Plug-ins Swiper" ></div>
  </div>
  <div></div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script src="swiper-3.3.1.jquery.min.js"></script>
<script>
var swiper = new Swiper(&#39;.swiper-container&#39;, {
  pagination: &#39;.swiper-pagination&#39;,
  paginationClickable: true
});
</script>
</body>
</html>

Ich hoffe, dass das, was dieser Artikel beschreibt, für alle in der jQuery-Programmierung hilfreich sein wird.

Weitere Anwendungsbeispiele für das adaptive jQuery-Karussell-Plug-in Swiper und verwandte Artikel finden Sie auf der chinesischen PHP-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：Bild verzögertes Laden von js basierend auf jqueryNächster Artikel：Bild verzögertes Laden von js basierend auf jquery

In Verbindung stehende Artikel

Mehr sehen