So wechseln Sie die Pfeiltasten im Swiper-Plug-in-js-Tutorial-php.cn

So wechseln Sie die Pfeiltasten im Swiper-Plug-in

php中世界最好的语言

Freigeben： 2018-04-13 13:39:20

Original

2962 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!