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>

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

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

赞 (0)

相关推荐

  • 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&

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

    本文实例为大家分享了swiper自定义分页器使用的具体代码,供大家参考,具体内容如下 解决问题:不想使用swiper的自带的圆钮式的分页器,想使用自定义的分页器. 解决方案:利用swiper提供的paginationCustomRender()方法(自定义特殊类型分页器,当分页器类型设置为自定义时可用.) 下面的代码可以直接赋值粘贴到html文件里面然后作为项目在浏览器打开,但是图片需要你引用自己的本地图片并设置好路径,否则你是看不到轮播图片的.代码如下(参考注释很重要): <!DOCTYPE

  • Jsp自定义标签和方法详解

    Jsp自定义标签和方法详解 首先是要有一个标签处理类,标签处理类可以直接实现Tag接口,也可以继承Java中已经实现了的TagSupport这个类,TagSupport也是继承自Tag接口的,它内部已经对Tag接口进行了实现,一般是继承TagSupport类,之后是重写父类的doStartTag和doEndTag方法, 对于开始标签来说返回值主要有EVAL_BODY_INCLUDE和SKIP_BODY,前者表示执行标签体,后者表示略过标签体: 对于结束标签的返回值主要有两种EVAL_PAGE和S

  • 对python 自定义协议的方法详解

    前面说到最近在写python的一些东西,然后和另外一位小伙伴定义了协议,然后昨天我有一部分东西没理解对,昨天上午我自己重写了一遍接收和发送的全部逻辑,昨天下午补了压力测试的脚本,自测没问题之后告知联调的小伙伴. 结果上午还是出了一点问题,然后我们两对代码,他写了一个python的实现.还好最后我这边没问题.(我也害怕是我这边出问题啊,所以我自己的代码都自己检查了好几遍) 简单放一下他的实现: import struct import ctypes class E(Exception): def

  • C++ STL priority_queue自定义排序实现方法详解

    前面讲解 priority_queue 容器适配器时,还遗留一个问题,即当 <function> 头文件提供的排序方式(std::less<T> 和 std::greater<T>)不再适用时,如何自定义一个满足需求的排序规则. 首先,无论 priority_queue 中存储的是基础数据类型(int.double 等),还是 string 类对象或者自定义的类对象,都可以使用函数对象的方式自定义排序规则.例如: #include<iostream> #in

  • Python实现在PyPI上发布自定义软件包的方法详解

    Python实现在PyPI上发布自定义软件包的方法详解

    目录 1. 引言 2. 创建PyPI账号 3. 创建包名 4. 按照如下格式组织包 5. 安装 Build & Twine 6. 构建测试包 7. 上传测试包 8. 总结 1. 引言 在Python中我们经常使用pip来安装第三方Python软件包,其实我们每个人都可以免费地将自己写的Python包发布到PyPI上,供他人来通过pip进行安装. 在本文中,我们将从一步一步地详细介绍如何发布测试包. 2. 创建PyPI账号 网址: https://pypi.org/ 我们可以通过上面的链接在PyP

  • SpringBoot实现自定义事件的方法详解

    目录 简介 步骤1:自定义事件 步骤2:自定义监听器 方案1:ApplicationListener 方案2:SmartApplicationListener 步骤3:注册监听器 法1:@Component(适用于所有监听器) 法2:application.yml中添加配置 法3:启动类中注册 步骤4:发布事件 法1:注入ApplicationContext,调用其publishEvent方法 法2:启动类中发布 简介 说明 本文用实例来介绍如何在SpringBoot中自定义事件来使用观察者模式

  • AngularJS基于factory创建自定义服务的方法详解

    本文实例讲述了AngularJS基于factory创建自定义服务的方法.分享给大家供大家参考,具体如下: 为什么要创建自定义服务? 很简单,不想让控制器显得过于"臃肿",而且服务可复用.针对性强,每个服务对应不同的功能. 这里介绍如何使用factory创建自定义服务,并且使用他. 例子1: <!--HTML--> <div ng-controller="showTheName"> <h1 ng-bind="name"

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • thinkPHP自定义类实现方法详解

    thinkPHP自定义类实现方法详解

    本文实例讲述了thinkPHP自定义类实现方法.分享给大家供大家参考,具体如下: 1.通过Model调用 <?php /** * 积分模型 api接口 */ class ApiModel{ private $url = 'http://js.yunlutong.com/Customer/Interface'; public function test() { $post_data['action'] = 'sadf'; $post_data['callback'] = '?'; $res = r

  • Android编程实现自定义手势的方法详解

    Android编程实现自定义手势的方法详解

    本文实例讲述了Android编程实现自定义手势的方法.分享给大家供大家参考,具体如下: 之前介绍过如何在Android程序中使用手势,主要是系统默认提供的几个手势,这次介绍一下如何自定义手势,以及如何对其进行管理. 先介绍一下Android系统对手势的管理,Android系统允许应用程序把用户的手势以文件的形式保存以前,以后要使用这些手势只需要加载这个手势库文件即可,同时Android系统还提供了诸如手势识别.查找及删除等的函数接口,具体如下: 一.加载手势库文件: staticGestureL

随机推荐