Comment changer les boutons fléchés dans le plug-in swiper
Apr 13, 2018 pm 01:39 PMCette fois, je vais vous montrer comment changer les boutons fléchés avec le plug-in swiper. Quelles sont les précautions pour changer les boutons fléchés avec le plug-in swiper. Voici un cas pratique, jetons un coup d'oeil.
C'est-à-dire que vous devez déplacer les flèches de commutation gauche et droite à l'extérieur du conteneur et personnaliser le style de la flèche.
Ajoutez un conteneur parent au conteneur swiper, laissez un espace entre les deux conteneurs et positionnez la flèche entre les espaces et tout ira bien.
La flèche est positionnée de manière absolue par défaut. Vous pouvez ajuster la position de la flèche en donnant au conteneur parent un positionnement relatif. De plus, la flèche utilise une image de fond. Lorsque vous modifiez la taille de la flèche, pensez à modifier la taille de l'image de fond. Remontez le code.
css :
<style>
.out_container{
width: 280px;
height: 150px;
margin: 100px auto;
position: relative;
outline: 1px solid black;
}
.in_container{
width: 216px;
height: 130px;
margin: 0 auto;
overflow: hidden;
}
.swiper_btn{
width: 20px;
height: 20px;
background-size: contain;
}
</style>html :
<body> <p class="out_container"> <p class="in_container"> <p class="swiper-wrapper"> <p class="swiper-slide"><img src="" alt=""></p> <p class="swiper-slide"><img src="" alt=""></p> <p class="swiper-slide"><img src="" alt=""></p> </p> <p class="swiper-button-prev swiper_btn"></p> <p class="swiper-button-next swiper_btn"></p> </p> </p> </body>
js :
<script>
var mySwiper = new Swiper('.in_container', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
})
</script>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment Angular implémente l'effet de minuterie
Explication détaillée des étapes de transfert et de distribution de données de vue.js
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!
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment se débarrasser des icônes fléchées pour les raccourcis sous Windows 11
Dec 28, 2023 am 10:39 AM
Comment se débarrasser des icônes fléchées pour les raccourcis sous Windows 11
Comment restaurer rapidement la petite flèche de l'icône de raccourci dans Win10 La solution à l'icône de raccourci manquante ?
Feb 29, 2024 pm 04:46 PM
Comment restaurer rapidement la petite flèche de l'icône de raccourci dans Win10 La solution à l'icône de raccourci manquante ?
Tutoriel d'utilisation pour passer de la version familiale Win11 à la version professionnelle_Tutoriel d'utilisation pour passer de la version familiale Win11 à la version professionnelle
Mar 20, 2024 pm 01:58 PM
Tutoriel d'utilisation pour passer de la version familiale Win11 à la version professionnelle_Tutoriel d'utilisation pour passer de la version familiale Win11 à la version professionnelle
Comment basculer entre la 4g et la 5g sur Xiaomi Mi 14Ultra ?
Feb 23, 2024 am 11:49 AM
Comment basculer entre la 4g et la 5g sur Xiaomi Mi 14Ultra ?
Comment implémenter la commutation double système dans le système Win10
Jan 03, 2024 pm 05:41 PM
Comment implémenter la commutation double système dans le système Win10
Comment résoudre les problèmes rencontrés lors de l'utilisation de swiper dans vue3
May 11, 2023 pm 01:07 PM
Comment résoudre les problèmes rencontrés lors de l'utilisation de swiper dans vue3
Changer le mode de démarrage double système de l'ordinateur Apple
Feb 19, 2024 pm 06:50 PM
Changer le mode de démarrage double système de l'ordinateur Apple
Je ne peux pas utiliser alt+tab pour changer d'interface dans win11. Quelle en est la raison ?
Jan 02, 2024 am 08:35 AM
Je ne peux pas utiliser alt+tab pour changer d'interface dans win11. Quelle en est la raison ?
