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 相关文章推荐
javascript中的关于类型转换的性能优化
Dec 14 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
JavaScript中while循环的基础使用教程
Aug 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PDO::errorInfo讲解
2019/01/28 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
django_orm查询性能优化方法
2018/08/20 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
将python安装信息加入注册表的示例
2019/11/20 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
校园运动会广播稿
2014/10/06 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
排球赛新闻稿
2015/07/17 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
java实现对Hadoop的操作
2021/07/01 Java/Android
MySQL常用慢查询分析工具详解
2022/08/14 MySQL