suchen

Heim  >  Artikel  >  Web-Frontend  >  So wechseln Sie die Pfeiltasten im Swiper-Plug-in

So wechseln Sie die Pfeiltasten im Swiper-Plug-in

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 13:39:202976Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Pfeiltasten mit dem Swiper-Plug-in wechseln. Werfen wir einen Blick darauf. 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 Positionierung zuweisen. 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:

html:
<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>

js:
<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! 
<script>
  var mySwiper = new Swiper('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>

Empfohlene Lektüre:

Wie Angular den Timer-Effekt implementiert


Detaillierte Erläuterung der Datenübertragungs- und Datenverteilungsschritte von vue.js


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

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：Wie vue+swiper das Seitenleistenmenü implementiertNächster Artikel：Wie vue+swiper das Seitenleistenmenü implementiert

In Verbindung stehende Artikel

Mehr sehen