swiper插件自定义切换箭头按钮
程序员文章站
2022-04-17 08:53:34
不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif。
也就是需要把左右切换的箭头移到容器的外面,自定义箭...
不知道大家在使用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>
效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: c++装饰模式
下一篇: vue+swiper实现侧滑菜单效果
推荐阅读
-
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
-
JavaScript自定义插件实现tabs切换功能
-
移动端触屏幻灯片图片切换插件idangerous swiper.js
-
基于jquery插件制作左右按钮与标题文字图片切换效果
-
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
-
vue使用swiper插件修改左右箭头的默认样式
-
vant 解决tab切换插件标题样式自定义的问题
-
Android自定义EditText实现带一键清除和密码明文切换按钮,支持多样式选择
-
Swiper快速切换插件
-
关于Tab切换中嵌套Swiper移动端滑动插件,导致Swiper插件失效的问题