So implementieren Sie wechselnde Pfeiltasten im Swiper-Plug-in-js-Tutorial-php.cn

So implementieren Sie wechselnde Pfeiltasten im Swiper-Plug-in

亚连

Freigeben： 2018-06-14 16:52:08

Original

2751 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die benutzerdefinierte Umschaltpfeiltaste des Swiper-Plug-Ins ausführlich vorgestellt, die einen gewissen Referenzwert hat.

Ich weiß nicht, ob Sie wann Erfahrung haben Wenn wir auf einen solchen Bedarf stoßen, passt das Swiper-Plugin die Umschaltpfeiltaste an. Gehen wir ohne weitere Umschweife direkt zum GIF.

Das heißt, Sie müssen den linken und rechten Umschaltpfeil außerhalb des Containers verschieben und den Pfeilstil anpassen.
Fügen Sie einen übergeordneten Container zum Swiper-Container hinzu, lassen Sie eine Lücke zwischen den beiden Containern und positionieren Sie den Pfeil zwischen den Lücken, dann ist alles in Ordnung.
Der Pfeil ist standardmäßig absolut positioniert. Sie können die Pfeilposition anpassen, indem Sie dem übergeordneten Container eine relative Position geben. Darüber hinaus verwendet der Pfeil ein Hintergrundbild. Denken Sie beim Ändern der Größe des Pfeils daran, die Größe des Hintergrundbilds zu ändern. Erweitern Sie den 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

js:

<script>
  var mySwiper = new Swiper(&#39;.in_container&#39;, {
    prevButton: &#39;.swiper-button-prev&#39;,
    nextButton: &#39;.swiper-button-next&#39;,
  })
</script>

Nach dem Login kopieren

Der Effekt ist wie folgt

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie dreistufige Verknüpfungsselektoren in WeChat-Miniprogrammen

PHP-Schließungen und anonyme Funktionen (Details Tutorial )

Über benutzerdefinierte Ereignisse in Vue-Komponenten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie wechselnde Pfeiltasten im Swiper-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!