Comment changer les boutons fléchés dans le plug-in swiper-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-13 13:39:20

original

3101 Les gens l'ont consulté

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!