这次给大家带来swiper插件怎样切换箭头按钮,swiper插件切换箭头按钮的注意事项有哪些,下面就是实战案例,一起来看一下。
也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式。
给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了。
箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置。此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小。上代码。
css:
.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;
}
html:
js:
var mySwiper = new Swiper('.in_container', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
})
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: