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 对象的解释
Nov 24 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
JavaScript 装逼指南(js另类写法)
May 10 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安装threads多线程扩展基础教程
2015/11/17 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
json跨域调用python的方法详解
2017/01/11 Python
windows下python连接oracle数据库
2017/06/07 Python
用python实现的线程池实例代码
2018/01/06 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
广告宣传策划方案
2014/05/21 职场文书
具结保证书
2015/01/17 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
董事长开业致辞
2015/07/29 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Django框架中表单的用法
2022/06/10 Python