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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
JS实现音乐钢琴特效
Jan 06 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
js 函数性能比较方法
2020/08/24 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
我的老师教学反思
2014/05/01 职场文书
捐书活动总结
2014/05/04 职场文书
2014年班组长工作总结
2014/11/20 职场文书
婚内分居协议书范文
2014/11/26 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
详解flex:1什么意思
2022/07/23 HTML / CSS