swiper插件自定义切换箭头按钮
2017-12-28 11:21
3031 查看
不知道大家在使用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插件自定义切换箭头按钮
- 基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素,代码简介,扩展性好。)
- 自定义RadioButton样式,切换按钮时变换背景颜色
- bootstrap轮播插件carousel图片切换移动速度自定义
- UI--Android中的状态切换按钮自定义
- UI--Android中的状态切换按钮自定义
- Bootstrap历练实例:按钮(Button)插件单个切换
- JQUERY JFLOW图片滚动插件左右按钮控制图片内容滑动切换
- 使用swiper插件实现qq聊天窗口按钮滑动效果
- 自定义上传图片按钮 实现图片的预览和切换
- 移动端触屏幻灯片图片切换插件idangerous swiper.js
- 结合Swiper插件,实现定制化的PC端鼠标滑动和点击控制屏幕切换
- Android自定义EditText——带一键清除和密码明文切换按钮,支持多样式选择
- vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
- jquery图片滚动插件(可自定义数字样式和左右点击按钮)
- 每个tab选项卡里都是swiper轮播插件怎样分开控制左右箭头?
- ALV在标准按钮上增加自定义按钮,并实现文本及功能互相切换
- JQuery左右按钮控制图片 文字向上滚动自定义插件
- ckeditor4.x 自定义插件的按钮显示文字
- ios 自定义带下划线的tab切换按钮