swiper插件自定义切换箭头按钮
2017-11-01 16:52
513 查看
不知道大家在使用swiper时有没有遇到这样一种需求,话不多说,直接上gif。
也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式。
给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了。
箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置。此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小。上代码。
效果如下
也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式。
给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了。
箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置。此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小。上代码。
<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>
<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>
<script> var mySwiper = new Swiper('.in_container', { prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', }) </script>
效果如下
相关文章推荐
- swiper插件自定义切换箭头按钮
- 基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素,代码简介,扩展性好。)
- Qt自定义按钮及不同状态下图片的切换
- bootstrap轮播插件carousel图片切换移动速度自定义
- jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件
- 百度ueditor富文本--自定义插件按钮
- 自定义RadioButton样式,切换按钮时变换背景颜色
- jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件
- 使用swiper插件实现qq聊天窗口按钮滑动效果
- XML自定义按钮样子-点击切换图片
- 自定义上传图片按钮 实现图片的预览和切换
- Android自定义EditText——带一键清除和密码明文切换按钮,支持多样式选择
- android 自定义切换按钮
- NGUI使用3——制作图集&自定义按钮&切换按钮图片
- django xadmin 插件(3) 列表视图新增自定义按钮
- 自定义按钮实现标签栏切换
- 基于jquery插件制作左右按钮与标题文字图片切换效果
- 移动端触屏幻灯片图片切换插件idangerous swiper.js
- JQUERY JFLOW图片滚动插件左右按钮控制图片内容滑动切换
- ckeditor4.x 自定义插件的按钮显示文字