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

前端之家收集整理的这篇文章主要介绍了swiper插件自定义切换箭头按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式。 给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',})

效果如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/34438.html

猜你在找的JavaScript相关文章