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 01 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
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中用memcached实现页面防刷新功能
2014/08/19 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
Element Input组件分析小结
2018/10/11 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
2014年百日安全生产活动总结
2014/05/04 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
正规欠条模板
2015/07/03 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技