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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
巧用canvas
Jan 21 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue组件发布到npm简单步骤
Nov 30 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
Node.js实现简单管理系统
Sep 23 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
dedecms模板标签代码官方参考
2007/03/17 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
wxPython的安装与使用教程
2018/08/31 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python实现串口自动触发工作的示例
2019/07/02 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
好军嫂事迹材料
2014/01/15 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python使用openpyxl批量处理数据
2021/06/23 Python