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

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

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

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

Je ne peux pas utiliser alt+tab pour changer d'interface dans win11. Quelle en est la raison ?
