简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Analyse du partage de code source d'image du carrousel Swiper

巴扎黑
Libérer： 2018-05-28 17:04:48
original
4593 Les gens l'ont consulté

Aujourd'hui, parlons de l'image du carrousel Swiper

Super simple :

Cuihua, le code : </p>

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

Enfin, n'oubliez pas d'importer les plug-ins Swiper.css et Swiper.js avant de taper ces choses !</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
swiper
source：php.cn
Article précédent：Tutoriel d'exemple de réflexion CSS3 Article suivant：Résumé de l'expérience du projet de page statique HTML5+CSS3
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Créez des boutons personnalisés pour la navigation dans les diapositives dans Swiper à l'aide de Vue.js Je dois supprimer la navigation par défaut (nextEl, prevEl) et faire défiler le bouton ave...
Depuis 2023-11-02 14:42:51
0
1
174
Dois-je inclure des modules de nœuds dans mon package de bibliothèque ? Je développe une bibliothèque de composants React. Cette bibliothèque est utilisée par plu...
Depuis 2023-09-12 19:36:43
0
1
268
Tester Swiper avec Jest J'ai un composant qui utilise swiper/react. Lors de l'écriture du scénario de test, je ne ...
Depuis 2023-08-31 22:35:14
0
1
306
Tutoriel Swiper : Comment contrôler les flèches en mouvement ? C'est mon carrousel, mais quand je veux configurer le bouton du swiper, les flèches sont l...
Depuis 2023-08-16 14:46:49
0
1
331
La boucle React JS Swiper ne peut pas traverser correctement les objets Mon Swiper ne fonctionne pas dans React et j'ai essayé de le réparer plusieurs fois sans s...
Depuis 2023-08-15 22:44:32
0
1
297
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！