Swiper自定义分页器使用详解


Posted in Javascript onDecember 28, 2017

Swiper自定义分页,供大家参考,具体内容如下

最终实现效果图:

Swiper自定义分页器使用详解

HTML DEMO(官网例子)

<link rel="stylesheet" href="path/to/swiper.min.css">

<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide">Slide 1</div>
  <div class="swiper-slide">Slide 2</div>
  <div class="swiper-slide">Slide 3</div>
 </div>
 <!-- 如果需要分页器 -->
 <div class="swiper-pagination"></div>

 <!-- 如果需要导航按钮 -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>

 <!-- 如果需要滚动条 -->
 <div class="swiper-scrollbar"></div>
</div>

<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>

1.设置导航按钮

注:Sweiper 的导航按钮及其他一些DOM结构是可以放到“.swiper-container”之外的。

<input class="btn btn-gray button-prev" name="" type="button" value="上一题">
<input class="btn btn-gray button-next" name="" type="button" value="下一题">

只需要按钮的class对应起来就OK。

<script>  
 var mySwiper = new Swiper ('.swiper-container', {
  // 如果需要前进后退按钮
  nextButton: '.button-next',//对应"下一题"按钮的class
  prevButton: '.button-prev',//对应"上一题"按钮的class
  pagination: '.pagination',//分页容器的css选择器
  paginationType : 'custom',//自定义-分页器样式类型(前提)
  //设置自定义分页器的内容
  paginationCustomRender: function (swiper, current, total) {
   var _html = '';
   for (var i = 1; i <= total; i++) {
    if (current == i) {
    _html += '<li class="swiper-pagination-custom active">' + i + '</li>';
    }else{
    _html += '<li class="swiper-pagination-custom">' + i + '</li>';
    }
   }
   return _html;//返回所有的页码html
  }
 })
 //给每个页码绑定跳转的事件 
 $('.swiper-pagination').on('click','li',function(){
  var index = this.innerHTML;
  mySwiper.slideTo(index-1, 500, false);//切换到第一个slide,速度为1秒
 })

</script>

2.设置自定义分页器(参见上面配置)

1.pagination: '.pagination' 给分页器一个容器,css类名选择器
2.paginationType : 'custom' 设置分页器自定义
3.paginationCustomRender:function(){} 设置自定义分页器的内容
4.给每个页码绑定跳转到对应页码的事件

Swiper自定义分页器使用详解

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

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
JQuery球队选择实例
May 18 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
swiper自定义分页器使用方法详解
Sep 14 #Javascript
JavaScript实现数值自动增加动画
Dec 28 #Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 #Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 #Javascript
JS实现带动画的回到顶部效果
Dec 28 #Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 #Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 #Javascript
You might like
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python单例模式的多种实现方法
2019/07/26 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
仓库管理员岗位职责
2014/03/19 职场文书
教师自我鉴定范文
2014/03/20 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
自荐信范文
2019/05/20 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL