swiper插件自定义切换箭头按钮

不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif。

也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式。

给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了。

箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置。此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小。上代码。

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>

<div class="out_container">

<div class="in_container">

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="" alt=""></div>

<div class="swiper-slide"><img src="" alt=""></div>

<div class="swiper-slide"><img src="" alt=""></div>

</div>

<div class="swiper-button-prev swiper_btn"></div>

<div class="swiper-button-next swiper_btn"></div>

</div>

</div>

</body>

js:

<script>

var mySwiper = new Swiper('.in_container', {

prevButton: '.swiper-button-prev',

nextButton: '.swiper-button-next',

})

</script>

效果如下

以上是 swiper插件自定义切换箭头按钮 的全部内容, 来源链接: utcz.com/z/313502.html

回到顶部