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 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
用JS实现飞机大战小游戏
Jun 09 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将字符串转换成16进制的方法
2015/03/17 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python用字典构建多级菜单功能
2019/07/11 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python扫描线填充算法详解
2020/02/19 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
标记环介质访问控制协议
2016/03/27 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
写景作文评语集锦
2014/12/25 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书