简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Swiper-Karussell-Bildquellcode-Sharing-Analyse

巴扎黑
Freigeben： 2018-05-28 17:04:48
Original
4593 Leute haben es durchsucht

Lass uns heute über das Swiper-Karussellbild sprechen

Ganz einfach:

Cuihua, der Code: </p>

<br>
Nach dem Login kopieren
<!DOCTYPE html>
Nach dem Login kopieren
<html lang="en">
Nach dem Login kopieren
<head>
Nach dem Login kopieren
<meta charset="utf-8">
Nach dem Login kopieren
<title>Swiper demo</title>
Nach dem Login kopieren
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Nach dem Login kopieren
<!-- Link Swiper&#39;s CSS -->
Nach dem Login kopieren
<link rel="stylesheet" href="../dist/css/swiper.min.css?1.1.11">
Nach dem Login kopieren
<!-- Demo styles -->
Nach dem Login kopieren
<style>
Nach dem Login kopieren
html, body {
Nach dem Login kopieren
position: relative;
Nach dem Login kopieren
height: 100%;
Nach dem Login kopieren
Nach dem Login kopieren
}
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
body {
Nach dem Login kopieren
background: #eee;
Nach dem Login kopieren
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
Nach dem Login kopieren
font-size: 14px;
Nach dem Login kopieren
color:#000;
Nach dem Login kopieren
margin: 0;
Nach dem Login kopieren
padding: 0;
Nach dem Login kopieren
}
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
.swiper-container {
Nach dem Login kopieren
width: 100%;
Nach dem Login kopieren
height: 100%;
Nach dem Login kopieren
Nach dem Login kopieren
}
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
.swiper-slide {
Nach dem Login kopieren
text-align: center;
Nach dem Login kopieren
font-size: 18px;
Nach dem Login kopieren
background: #fff;
Nach dem Login kopieren
/* Center slide text vertically */
Nach dem Login kopieren
display: -webkit-box;
Nach dem Login kopieren
display: -ms-flexbox;
Nach dem Login kopieren
display: -webkit-flex;
Nach dem Login kopieren
display: flex;
Nach dem Login kopieren
-webkit-box-pack: center;
Nach dem Login kopieren
-ms-flex-pack: center;
Nach dem Login kopieren
-webkit-justify-content: center;
Nach dem Login kopieren
justify-content: center;
Nach dem Login kopieren
-webkit-box-align: center;
Nach dem Login kopieren
-ms-flex-align: center;
Nach dem Login kopieren
-webkit-align-items: center;
Nach dem Login kopieren
align-items: center;
Nach dem Login kopieren
}
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
</style>
Nach dem Login kopieren
</head>
Nach dem Login kopieren
<body>
Nach dem Login kopieren
<!-- Swiper -->
Nach dem Login kopieren
<p class="swiper-container">
Nach dem Login kopieren
<p class="swiper-wrapper">
Nach dem Login kopieren
<p class="swiper-slide">Slide 1</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 2</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 3</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 4</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 5</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 6</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 7</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 8</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 9</p>
Nach dem Login kopieren
<p class="swiper-slide">Slide 10</p>
Nach dem Login kopieren
</p>
Nach dem Login kopieren
Nach dem Login kopieren
<!-- Add Pagination -->
Nach dem Login kopieren
</p>
Nach dem Login kopieren
</p>
Nach dem Login kopieren
Nach dem Login kopieren
<!-- Swiper JS -->
Nach dem Login kopieren
<script src="../dist/js/swiper.min.js?1.1.11"></script>
Nach dem Login kopieren
<!-- Initialize Swiper -->
Nach dem Login kopieren
<script>
Nach dem Login kopieren
var swiper = new Swiper(&#39;.swiper-container&#39;, {//小白点
Nach dem Login kopieren
pagination: &#39;.swiper-pagination&#39;,
Nach dem Login kopieren
paginationClickable: true
Nach dem Login kopieren
});
Nach dem Login kopieren
</script>
Nach dem Login kopieren
</body>
Nach dem Login kopieren
</html>
Nach dem Login kopieren

Vergessen Sie nicht, die Plug-Ins Swiper.css und Swiper.js zu importieren, bevor Sie diese Dinge eingeben!</p>

Das obige ist der detaillierte Inhalt vonSwiper-Karussell-Bildquellcode-Sharing-Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
swiper
Quelle：php.cn
Vorheriger Artikel：Beispiel-Tutorial zur CSS3-Reflexion Nächster Artikel：Zusammenfassung der Erfahrungen mit statischen HTML5+CSS3-Seitenprojekten
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Erstellen Sie mit Vue.js benutzerdefinierte Schaltflächen für die Foliennavigation in Swiper Ich muss die Standardnavigation (nextEl, prevEl) entfernen und die Schaltfläche mit dem Te...
Aus 2023-11-02 14:42:51
0
1
174
Sollte ich Knotenmodule in mein Bibliothekspaket aufnehmen? Ich entwickle eine React-Komponentenbibliothek. Diese Bibliothek wird von mehreren interne...
Aus 2023-09-12 19:36:43
0
1
268
Swiper mit Jest testen Ich habe eine Komponente, die Swiper/React verwendet. Während ich den Testfall schreibe, k...
Aus 2023-08-31 22:35:14
0
1
306
Swiper-Tutorial: Wie steuere ich bewegliche Pfeile? Dies ist mein Karussell, aber wenn ich die Wischtaste konfigurieren möchte, sind die Pfeil...
Aus 2023-08-16 14:46:49
0
1
331
Die React JS Swiper-Schleife kann Objekte nicht korrekt durchlaufen Mein Swiper funktioniert in React nicht und ich habe mehrmals erfolglos versucht, das Prob...
Aus 2023-08-15 22:44:32
0
1
297
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！