Maison interface Web js tutoriel Comment changer les boutons fléchés dans le plug-in swiper

Comment changer les boutons fléchés dans le plug-in swiper

Apr 13, 2018 pm 01:39 PM
swiper 切换 箭头

Cette 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>
Copier après la connexion

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>
Copier après la connexion

js :

<script>
  var mySwiper = new Swiper('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>
Copier après la connexion

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!

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

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment se débarrasser des icônes fléchées pour les raccourcis sous Windows 11 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 ? 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 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 ? 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 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 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 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 ? 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 ?

See all articles