Swiper-轮播图。
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.
初始化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper.css"/>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide{
font-size: 50px
}
.swiper-slide:nth-of-type(1){
background-color: cornflowerblue;
}
.swiper-slide:nth-of-type(2){
background-color: coral;
}
.swiper-slide:nth-of-type(3){
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<!--导航等组件可以放在container之外--> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
// loop: true,
//
// // 如果需要分页器
pagination: '.swiper-pagination',
//
// // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
//
// // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
</html>- 基本配置
var mySwiper = new Swiper ('.swiper-container', {
// 滑动方向
// horizontal水平
// vertical垂直
direction: 'horizontal',
// 初始化时候slide的索引(从0开始)
initialSlide: 1,
// 手指松开至slide贴合的时间
speed:3000,
// 设置自动播放的事件间隔
autoplay: 2000,
// 可显示数量
slidesPerView:2,
// 滑块居中
centeredSlides:true,
}) 触摸设置
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 触摸距离与slide滑动距离的比率
touchRatio:0.1, // 无法滑动
onlyExternal:true, // 滑块跟随手指进行移动
followFinger:false, // 定义longSwipesMs
longSwipesMs:1000, longSwipes:false, shortSwipes:false, longSwipesRatio:0.5, touchAngle:10,
})
禁止切换和前进后退 <body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide stop">Slide 1</div>
<!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>-->
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
noSwiping:true,
noSwipingClass : "stop",
nextButton : ".next",
prevButton : ".prev",
})
</script>
分页器 <style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide{
font-size: 50px
}
.swiper-slide:nth-of-type(1){
background-color: cornflowerblue;
}
.swiper-slide:nth-of-type(2){
background-color: coral;
}
.swiper-slide:nth-of-type(3){
background-color: yellowgreen;
}
.swiper-pagination-bullet{
width: 20px;
height: 20px;
}
.swiper-pagination-bullet-active{
background-color: yellow;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
pagination : ".swiper-pagination",
paginationType : "bullets",
paginationType : "fraction",
paginationType : "progress",
paginationClickable : true,
paginationHide : true,
paginationElement : "i",
paginationBulletRender : function( swiper,index,classname ){
return "<span class='"+ classname +"'>"+ (index+1) +"</span>"
}
})
</script>
</body>
切换效果 <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', effect : "slide",
effect : "fade",
effect : "cube",
effect : "coverflow",
effect : "flip",
})
</script>
进程 <body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<button id="btn">按钮</button> <script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', }) btn.onclick = function(){
alert( mySwiper.progress );
alert( mySwiper.slides[0].progress );
console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
} setInterval(function(){
console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
},20)
</script>
</body>常用属性和回调
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<button id="btn">按钮</button>
<script src="swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', speed : 2000, onSlideChangeStart : function(){
console.log( "开始滑动" );
},
onSlideChangeEnd : function(){
console.log( "滑动结束" );
}
}) console.log( mySwiper.width );
console.log( mySwiper.height ); btn.onclick = function(){
console.log( mySwiper.translate );
console.log( mySwiper.activeIndex );
console.log( mySwiper.previousIndex );
}
</script>
</body>
Swiper-轮播图。的更多相关文章
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- swiper 轮播图，拖动之后继续轮播
在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
- swiper轮播图（逆向自动切换类似于无限循环）
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
随机推荐
- Postman—参数化
一.单个数据参数化 场景:购物车接口,需要用到登录接口返回的token 1.登录接口,在Tests里面设置usertoken环境变量,用来保存token值. 2.获取购物车接口使用usertoken变 ...
- 江苏公务员职位表导入MySQL
USE `database`; /*Table structure for table `post` */ DROP TABLE IF EXISTS `post`; CREATE TABLE `pos ...
- Tomcat中组件的生命周期管理公共接口Lifecycle
Tomcat的组件都会实现一个Lifecycle接口,以方便组件的生命周期的统一管理 interface Lifecycle 组件生命周期中主要的几个方法 增加监听器,事件委托机制 public vo ...
- STL 容器简介
一.概述 STL 对定义的通用容器分三类:顺序性容器.关联式容器和容器适配器. 顺序性容器是一种各元素之间有顺序关系的线性表.元素在顺序容器中保存元素置入容器时的逻辑顺序,除非用删除或插入的操作改变这 ...
- C++中迭代器原理、失效和简单实现
目录 迭代器的使用 迭代器的种类 迭代器的失效 迭代器的实现 1.迭代器的使用 为了提高C++编程的效率,STL中提供了许多容器,包括vector.list.map.set等.有些容器例如vector ...
- SpringBoot入门 (二) 属性文件读取
在上一篇中介绍了在idea中创建springboot工程及使用web工程输出“helloworld”到前端页面,本文学习在springboot工程中读取属性文件中的属性值. 一 自定义属性 在appl ...
- ABP实战--项目结构
学习完毕With ASP.NET Core & Entity Framework Core Part-1及Part-2后,只实现了基本的功能,使用该工程继续学习ABP的更多功能. 更改项目结构 ...
- nodeJs的npm报错问题
1. Failed at the phantomjs-prebuilt@2.1.14 install script 'node install.js'. 解决办法: npm install phant ...
- Web--CSS控制页面（link与import方式区别）
先了解: [1] “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构 W3C,是World Wide ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...