脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → swiper自定义分页器使用

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

 更新时间：2020年09月14日 08:24:10   作者：夏尔_  
这篇文章主要为大家详细介绍了swiper自定义分页器的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

代码效果图如下（上传图片大小有限制，所以我滑的有点快）：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • layui点击按钮页面会自动刷新的解决方案

    layui点击按钮页面会自动刷新的解决方案

    今天小编就为大家分享一篇layui点击按钮页面会自动刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 微信小程序动态显示项目倒计时效果

    微信小程序动态显示项目倒计时效果

    这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时，格式如4天7小时58分钟39秒，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • GoJs面板绘图模板go.Panel使用示例详解

    GoJs面板绘图模板go.Panel使用示例详解

    这篇文章主要为大家介绍了GoJs面板绘图模板go.Panel使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • js实现for循环跳过undefined值示例

    js实现for循环跳过undefined值示例

    这篇文章主要介绍了js实现for循环跳过undefined值,结合实例形式分析了js使用for循环针对数组的遍历、判断、运算等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • 基于js与flash实现的网站flv视频播放插件代码

    基于js与flash实现的网站flv视频播放插件代码

    这篇文章主要介绍了基于js与flash实现的网站flv视频播放插件代码,该功能在很多网站上都有着广泛的应用,本文以实例形式对其进行介绍,需要的朋友可以参考下
    2014-10-10
  • 使用jquery解析XML的方法

    使用jquery解析XML的方法

    这篇文章主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下
    2014-09-09
  • 用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    用 XMLDOM 和 ADODB.Stream 实现base64编码解码实现代码，需要的朋友可以参考下。
    2010-11-11
  • AutoJs实现刷宝短视频的思路详解

    AutoJs实现刷宝短视频的思路详解

    这篇文章主要介绍了AutoJs实现刷宝短视频的思路详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-05
  • 微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

    微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

    这篇文章主要介绍了微信小程序实现action-sheet弹出底部菜单功能,结合实例形式分析了action-sheet组件弹出菜单的使用技巧,包括元素遍历、事件响应及属性设置等操作方法,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • 80%应聘者都不及格的JS面试题

    80%应聘者都不及格的JS面试题

    超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到。这究竟是怎样神奇的一道JS面试题？他考察了候选人的哪些能力？对正在读本文的你有什么启示？
    2017-03-03

最新评论