swiper自定义分页器使用方法详解


Posted in Javascript onSeptember 14, 2020

本文实例为大家分享了swiper自定义分页器使用的具体代码,供大家参考,具体内容如下

解决问题:不想使用swiper的自带的圆钮式的分页器,想使用自定义的分页器。

解决方案:利用swiper提供的paginationCustomRender()方法(自定义特殊类型分页器,当分页器类型设置为自定义时可用。)
下面的代码可以直接赋值粘贴到html文件里面然后作为项目在浏览器打开,但是图片需要你引用自己的本地图片并设置好路径,否则你是看不到轮播图片的。代码如下(参考注释很重要):

<!DOCTYPE html> 
<html> 
 
 <head> 
 <meta charset="UTF-8"> 
 <title>swiper自定义分页器用法</title> 
 <link href="swiper-3.4.2.min.css" rel="stylesheet" /> 
 <style> 
 * { 
 padding: 0; 
 margin: 0; 
 } 
 
 .swiper-container { 
 position: relative; 
 width: 100%; 
 height: 100%; 
 } 
 
 .swiper-slide { 
 text-align: center; 
 font-size: 18px; 
 background: #fff; 
 display: -webkit-box; 
 display: -ms-flexbox; 
 display: -webkit-flex; 
 display: flex; 
 -webkit-box-pack: center; 
 -ms-flex-pack: center; 
 -webkit-justify-content: center; 
 justify-content: center; 
 -webkit-box-align: center; 
 -ms-flex-align: center; 
 -webkit-align-items: center; 
 align-items: center; 
 } 
 
 .swiper-slide img { 
 display: block; 
 width: 100%; 
 max-width: 100%; 
 } 
 /*包裹自定义分页器的div的位置等CSS样式*/ 
 .swiper-pagination-custom { 
 bottom: 10px; 
 left: 0; 
 width: 100%; 
 } 
 /*自定义分页器的样式,这个你自己想要什么样子自己写*/ 
 .swiper-pagination-customs { 
 width: 30px; 
 height: 4px; 
 display: inline-block; 
 background: #000; 
 opacity: .3; 
 margin: 0 5px; 
 } 
 /*自定义分页器激活时的样式表现*/ 
 .swiper-pagination-customs-active { 
 opacity: 1; 
 background-color: #F78E00; 
 } 
 </style> 
 </head> 
 
 <body> 
 <div class="swiper-container"> 
 <div class="swiper-wrapper"> 
 <div class="swiper-slide"> 
  <img src="banner1_.jpg" alt="轮播图1" /> 
 </div> 
 <div class="swiper-slide"> 
  <img src="banner2_.jpg" alt="轮播图2" /> 
 </div> 
 </div> 
 <div class="swiper-pagination"></div> 
 </div> 
 </body> 
 <script src="jquery.min.js"></script> 
 <script type="text/javascript" src="swiper.min.js"></script> 
 <script> 
 var mySwiper = new Swiper('.swiper-container', { 
 direction: 'horizontal', 
 loop: true, 
 autoplay: 3000,//自动轮播 
 speed: 600, 
 // 如果需要分页器 
 pagination: '.swiper-pagination', 
 paginationType: 'custom',//这里分页器类型必须设置为custom,即采用用户自定义配置 
 //下面方法可以生成我们自定义的分页器到页面上 
 paginationCustomRender: function(swiper, current, total) { 
 var customPaginationHtml = ""; 
 for(var i = 0; i < total; i++) { 
  //判断哪个分页器此刻应该被激活 
  if(i == (current - 1)) { 
  customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>'; 
  } else { 
  customPaginationHtml += '<span class="swiper-pagination-customs"></span>'; 
  } 
 } 
 return customPaginationHtml; 
 } 
 }); 
 </script> 
 
</html>

代码效果图如下(上传图片大小有限制,所以我滑的有点快):

swiper自定义分页器使用方法详解

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

Javascript 相关文章推荐
URL地址中的#符号使用说明
Feb 12 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
JavaScript简介
Feb 15 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 #Javascript
You might like
PHP的password_hash()使用实例
2014/03/17 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python显示进度条的方法
2014/09/20 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python字符串与url编码的转换实例
2018/05/10 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python如何在DataFrame增加数值
2020/02/14 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python中的Cookie模块如何使用
2020/06/04 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
我们的节日端午节活动方案
2014/03/02 职场文书
师范毕业生求职信
2014/07/11 职场文书
初二学生评语大全
2014/12/26 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python