Comment implémenter les boutons fléchés de commutation dans le plug-in swiper-js tutoriel-php.cn

Comment implémenter les boutons fléchés de commutation dans le plug-in swiper

亚连

Libérer： 2018-06-14 16:52:08

original

2730 Les gens l'ont consulté

Cet article présente principalement en détail le bouton fléché de commutation personnalisé du plug-in swiper, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Je ne sais pas si vous avez une expérience quand. en utilisant swiper. Face à un tel besoin, le plug-in swiper personnalise le bouton fléché de commutation. Sans plus tarder, passons directement au gif.

Autrement dit, 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 une position relative. 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(&#39;.in_container&#39;, {
    prevButton: &#39;.swiper-button-prev&#39;,
    nextButton: &#39;.swiper-button-next&#39;,
  })
</script>

Copier après la connexion

L'effet est le suivant