一个swiper 两个分页器的写法【总结】

写项目的时候,使用的是swiper插件呈现的效果是一个swiper要实现两个分页器,下面就来总结一下

以swiper3为例来写,在页面中引入jquery、swiper.min.js和swiper.min.css文件。

HTML结构:

 

  <div class="banner swiper-container"><div class="swiper-wrapper"><div class="swiper-slide blue-slide">slider1</div><div class="swiper-slide red-slide">slider2</div><div class="swiper-slide orange-slide">slider3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 自定义分页器 --><div class="swiper-num"><span class="active"></span>/<span class="total"></span></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>

 

.swiper-num这一块是需要自己定义的。
CSS样式:

 

   .banner .swiper-pagination-bullets{bottom: 0;}.banner .swiper-pagination-bullets{bottom: 0;}.swiper-num {position: absolute;width: 165px;left:10%;bottom: 0;z-index: 2;}.swiper-num .active {display: inline-block;}.swiper-num span {font-size: 32px;}.swiper-num .total {display: inline-block;}.banner .swiper-slide{line-height: 500px;text-align: center;font-size: 50px;}.blue-slide {background: #4390EE;color: #fff;}.red-slide {background: #CA4040;color: #fff}.orange-slide {background: #FF8604;color: #fff;}.gray-slide {background: gray;color: #fff;}

 

js代码:

 

var mySwiper = new Swiper ('.banner', {loop: true, // 循环模式选项// 如果需要分页器pagination:  '.swiper-pagination',// 如果需要前进后退按钮nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',onInit: function(swiper){//Swiper初始化了var total = "0"+swiper.bullets.length;var active =swiper.activeIndex;$(".swiper-num .active").text("0"+active);$(".swiper-num .total").text(total);
},
onSlideChangeEnd: function(swiper){var active =swiper.realIndex +1;$(".swiper-num .active").text("0"+active);
}

 

onInit 回调函数,初始化后执行。
swiper.bullets.length:是获取分页器swiper的分页器个数长度。
activeIndex:当前swiper-slide的索引。
onSlideChangeEnd(swiper):回调函数,swiper从一个slide过渡到另一个slide结束时执行。
swiper.realIndex:当前活动的swiper-slide的索引,与activeIndex不同的是,在loop模式下不会将复制的块的数量计算在内。

以swiper4为例来写:
swiper4和swiper3的HTML结构一样,css样式也一样,使用的版本是swiper4.5
JS代码:

 

 var mySwiper = new Swiper ('.banner', {loop: true, // 循环模式选项loopedSlides:1,//如果是1的话不写也行// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},on:{init:function(){console.log(this);var total=this.slides.length-2;console.log(total);$('.total').text('0'+total);this.emit('transitionEnd');},transitionEnd:function(){console.log(this.realIndex);var index=this.realIndex+1;$(".active").text("0"+index);}}})  

 

this.slides.length的长度为5,img的长度为3,所以减掉2,但是减去的前提是loopedSlides:1,的取值。
loopedSlides 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
this.realIndex是从0开始的。所以要在此基础上加1。

每天学习一点点,让自己进步一点点。

 

 

转载于:https://www.cnblogs.com/ling-nl/p/10935749.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/393526.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react路由守卫+重定向_React + Apollo:如何在重新查询后进行重定向

react路由守卫重定向by Jun Hyuk Kim金俊赫 React Apollo&#xff1a;如何在重新查询后进行重定向 (React Apollo: How to Redirect after Refetching a Query) GraphQL is hot, and for a good reason. In short, it is a query language that allows you to ask for exact…

python 爬虫可视化编程_Python爬虫爬取博客实现可视化过程解析

源码&#xff1a;from pyecharts import Barimport reimport requestsnum0b[]for i in range(1,11):linkhttps://www.cnblogs.com/echoDetected/default.html?pagestr(i)headers{user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko…

tp6常用命令

TP6常用命令 1.创建控制器 php think make:controller --plain index** (php think make:controller --plain 控制器名称&#xff08;首字母大写&#xff09;)2.创建模型 php think make:model 【模块名】/模型名 模型名为表名相当3.创建中间件 php think make:middleware 中…

Problem B: 字符类的封装

Description 先来个简单习题&#xff0c;练练手吧&#xff01;现在需要你来编写一个Character类&#xff0c;将char这一基本数据类型进行封装。该类中需要有如下成员函数&#xff1a; 1. 无参构造函数。 2. 构造函数Character(char)&#xff1a;用参数初始化数据成员。 3. void…

leetcode852. 山脉数组的峰顶索引(二分法)

我们把符合下列属性的数组 A 称作山脉&#xff1a; A.length > 3 存在 0 < i < A.length - 1 使得A[0] < A[1] < … A[i-1] < A[i] > A[i1] > … > A[A.length - 1] 给定一个确定为山脉的数组&#xff0c;返回任何满足 A[0] < A[1] < … A[i…

linux 一键安装lnmp

运行下面这天命令&#xff0c;回车 wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz && cd lnmp1.5 && ./install.sh lnmp 选择数据库版本&#xff0c;回车 设置MySQL的root密码&#xff08;为了安全不…

图标下载

个人认为非常好的一个网站&#xff1a; http://www.easyicon.net/

以太坊ipfs_动手:Infura和以太坊上的IPFS入门

以太坊ipfsby Niharika Singh由Niharika Singh 动手&#xff1a;Infura和以太坊上的IPFS入门 (Hands On: Get Started With Infura and the IPFS on Ethereum) 为什么选择Infura&#xff1f; (Why Infura?) There are a lot of pain points being faced by blockchain which …

suse required-start: mysql_suse linux 安装MySql步骤

今天下午终于把mysql搞定了&#xff0c;我安装的这个linux版本(suselinux10.0)自己带的有Mysql&#xff0c;但是&#xff0c;在网上查的版本要比这高&#xff0c;所以就上网找了一个然后自己装&#xff0c;但是从来没有接触过MySql也不知道该怎么装&#xff0c;于是就上网找&am…

PHP上传文件到七牛云和阿里云

七牛云上传 注册七牛云账号并认证 进入控制台找到对象存储添加一个新的仓库 添加完成之后看文档 安装 使用 Composer 安装 Composer是 PHP 依赖管理工具。你可以在自己的项目中声明所依赖的外部工具库&#xff0c;Composer 会自动帮你安装这些依赖的库文件。    1. 安装…

变态青蛙跳

2019独角兽企业重金招聘Python工程师标准>>> 题目描述 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。 相比普通青蛙跳&#xff0c;这个 n级的就有点难了&#xff0c;重点是 能跳n级&…

中间的数(若已经排好序)

描述&#xff1a; 奇数个&#xff0c;输出中间那个 偶数个&#xff0c;输出中间那俩 代码&#xff1a; #include<iostream>using namespace std;int main(){ int *a; int n; cin>>n; anew int[n]; for(int i0; i<n; i) cin>>a[i]; …

leetcode1237. 找出给定方程的正整数解(二分法)

给出一个函数 f(x, y) 和一个目标结果 z&#xff0c;请你计算方程 f(x,y) z 所有可能的正整数 数对 x 和 y。 给定函数是严格单调的&#xff0c;也就是说&#xff1a; f(x, y) < f(x 1, y) f(x, y) < f(x, y 1) 函数接口定义如下&#xff1a; interface CustomFunc…

数据库 测试数据生成_我们的测试数据生成器如何使假数据看起来真实

数据库 测试数据生成by Tom Winter汤姆温特(Tom Winter) 我们的测试数据生成器如何使假数据看起来真实 (How our test data generator makes fake data look real) We recently released DataFairy, a free tool that generates test data. But first, let me tell you the st…

tp框架生命周期

1、入口文件 用户发起的请求都会经过应用的入口文件&#xff0c;通常是 public/index.php文件。当然&#xff0c;你也可以更改或者增加新的入口文件。 通常入口文件的代码都比较简单&#xff0c;一个普通的入口文件代码如下&#xff1a; // 应用入口文件 // 定义项目路径 d…

django 创建mysql失败_创建表时出现Django MySQL错误

我正在用MySQL数据库构建一个django应用程序。当我第一次运行“python manage.py migrate”时&#xff0c;一些表创建得很好&#xff0c;然后出现一些错误。出现的错误是&#xff1a;django.db.utils.IntegrityError: (1215, Cannot add foreign keyconstraint)当我运行这个MyS…

Laravel数据库迁移和填充(支持中文)

写在前面 经常我们做项目都团队协作开发&#xff0c;每个人都在自己本地的数据库&#xff0c;如果你曾经出现过让同事手动在数据库结构中添加字段的情况&#xff0c;数据库迁移可以解决你这个问题。 不仅如此&#xff0c;在线上部署的时候&#xff0c;也避免了手动导入数据库或…

leetcode374. 猜数字大小(二分法)

猜数字游戏的规则如下&#xff1a; 每轮游戏&#xff0c;系统都会从 1 到 n 随机选择一个数字。 请你猜选出的是哪个数字。 如果你猜错了&#xff0c;系统会告诉你这个数字比系统选出的数字是大了还是小了。 你可以通过调用一个预先定义好的接口 guess(int num) 来获取猜测结果…

什么情况下你的工作最为成功_如何在没有工作经验的情况下获得技术工作

什么情况下你的工作最为成功by Anthony Sistilli安东尼西斯蒂里(Anthony Sistilli) 如何在没有工作经验的情况下获得技术工作 (How to get a tech job with no previous work experience) I run a free community called the Forge where I help students navigate the world …

jquery批量删除

前台代码 <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0">…