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


Posted in Javascript onDecember 28, 2017

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
vue如何从接口请求数据
Jun 22 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 #Javascript
Vue组件通信之Bus的具体使用
Dec 28 #Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
swiper自定义分页器使用方法详解
Sep 14 #Javascript
JavaScript实现数值自动增加动画
Dec 28 #Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 #Javascript
You might like
php简单分页类实现方法
2015/02/26 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
JavaScript 指导方针
2007/04/05 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
车间工艺员岗位职责
2013/12/09 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
文化活动实施方案
2014/03/28 职场文书
《四季》教学反思
2014/04/08 职场文书
建材投资建议书
2014/05/16 职场文书
2014年司机工作总结
2014/11/21 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers