Heim > Artikel > Web-Frontend > So implementieren Sie wechselnde Pfeiltasten im Swiper-Plug-in

So implementieren Sie wechselnde Pfeiltasten im Swiper-Plug-in

亚连Original: 2018-06-14 16:52:082738Durchsuche

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>

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

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!

php css html 闭包 JS 事件选择器微信小程序

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie den seitlichen Schiebemenüeffekt in Vue+SwiperNächster Artikel：So implementieren Sie den seitlichen Schiebemenüeffekt in Vue+Swiper

In Verbindung stehende Artikel

Mehr sehen