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:
<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><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>
<script>
var mySwiper = new Swiper('.in_container', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
})
</script>Empfohlene Lektüre:
Wie Angular den Timer-Effekt implementiertDetaillierte Erläuterung der Datenübertragungs- und Datenverteilungsschritte von vue.jsDas 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
