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 学习之旅 (2)
Feb 05 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
浅谈PHP的反射机制
2016/12/15 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
javascript实现简易计算器
2017/02/01 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
python接入支付宝的实例操作
2020/07/20 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
SQL中where和having的区别
2012/06/17 面试题
护理专科自荐书范文
2014/02/18 职场文书
《阳光》教学反思
2014/02/23 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
学籍证明模板
2014/11/21 职场文书
检讨书范文1000字
2015/01/28 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
图文详解nginx日志切割的实现
2022/01/18 Servers