swiper插件自定义切换箭头按钮
更新时间：2017年12月28日 11:21:21 作者：_六月
这篇文章主要为大家详细介绍了swiper插件自定义切换箭头按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
不知道大家在使用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>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javascript 获取url参数和script标签中获取url参数函数代码
不要在方法中调用方法，否则可能始终获取的是最后一个js的文件的参数，要在方法中使用，请先用变量保存，在方法中直接获取2010-01-01
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要为大家详细介绍了微信小程序实现答题倒计时，自定义计时器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
下面的原理是利用时间差的原理实现脚本的延迟执行，是个思路，需要的朋友可以参考下。2010-03-03
JS 如果改变span标签的是否隐藏属性,大家根据需要选择使用。2011-10-10
这篇文章主要为大家详细介绍了原生js实现点击按钮复制文本的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要为大家详细介绍了原生js实现3D轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方,不过哈希对象Object并不是一个真正的哈希映射,没Java中的Hash Map来的那么强大,well,接下来带大家详解JavaScript中Hash Map映射结构的实现2016-05-05
这篇文章主要介绍了JS结合bootstrap实现基本的增删改查功能,需要的朋友可以参考下2016-07-07
非常不错的，看了这个大家就明白身份证的运算规则了2008-10-10
最新评论