轮播swiper配置选项

　本文主要介绍了swiper配置选项，包含了轮播的无限滚动、懒加载、监听当前位置、上下翻页、过渡动画渐变、延时加载图片、自动轮播等；　

swiper官方链接DEMO

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Swiper demo</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><!-- Link Swiper's CSS --><link rel="stylesheet" href="public/css/swiper.min.css"><!-- Demo styles --><style>body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;/*控制swiper组件的高度height*//*height: 450px;*/max-height: 60vh;}.swiper-slide {/* Center slide text vertically *//*弹性盒子flex的应用*/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容器内图片*/.swiper-slide img{width: 100%;}</style>
</head>
<body><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><!--data-src懒加载--><img data-src="public/img/timg0.jpg" class="swiper-lazy"><div class="swiper-lazy-preloader"></div></div><div class="swiper-slide"><!--data-src懒加载--><img data-src="public/img/timg1.jpg" class="swiper-lazy"><div class="swiper-lazy-preloader"></div></div><div class="swiper-slide"><!--data-src懒加载--><img data-src="public/img/timg2.jpg" class="swiper-lazy"><div class="swiper-lazy-preloader"></div></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div><!--jQ--><script src="public/js/jquery-2.1.4.min.js"></script><!-- Swiper JS --><script src="public/js/swiper.jquery.min.js"></script><!-- Initialize 初始化 Swiper --><script>$(document).ready(function () {var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',//可选选项，是否显示分页器paginationClickable: true,//可选选项，是否点击分页器滑动lazyLoading : true,//是否懒加载lazyLoadingInPrevNext : true,//可选选项，设置为true允许将延迟加载应用到最接近的slide的图片autoplay: 3000,//可选选项，自动滑动的时间,1000为1秒speed:2000,//可选选项，翻一页切换的速率initialSlide :1,//可选选项，初始的页面，默认0//direction : 'vertical',//可选选项，滚动的方向，默认水平//parallax : true,//可选选项，视距差//nextButton: '.swiper-button-next',//下一页//prevButton: '.swiper-button-prev',//上一页//width : window.innerWidth,//可选选项，全屏effect : 'fade',//可选选项，渐变动画//onSlideChangeStart: function(swiper){//alert(swiper.activeIndex);//},//获取当前的序号开始时触发函数，改为onSlideChangeEnd是切换成功后触发loop: 1,//是否无限滚动//点击事件//onTap: function(swiper){//  alert('你tap了Swiper');//},//在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件});//自定义上一页、下一页$('#btn1').click(function(){swiper.slidePrev();});$('#btn2').click(function(){swiper.slideNext();});})</script>
</body>
</html>

转载于:https://www.cnblogs.com/hellman/p/10636873.html

轮播swiper配置选项相关推荐

轮播swiper中加视频video滑动不顺畅报错 property on ‘HTMLMediaElement‘: The provided double value is non-finite.
轮播swiper中加视频video滑动不顺畅报错TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': T ...
三种方法实现轮播图配置，史上最简方法~
源代码: <div class="conscroll"><div class="caroubtn" @click="toleft&q ...
最新Banner（图片轮播）配置使用
Step 1.依赖banner Gradle dependencies{compile 'com.youth.banner:banner:1.4.9' //最新版本 } 或者引用本地lib compi ...
html轮播视频插件上加文字,可加入视频、图片的轮播swiper插件（可以拖动、视频存在加载条）...
使用方法 css引用: html: 这是一个视频自动播放存在进度条这是图片图片放data-image 6秒滑动 js引用: js: $('#pbSlider0').pbTouchSlider( ...
swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播
首先是实例化swiper 这里有一个注意点,就是实例化的时机如果你的swiper内容是写死的,可以在componentDidMount中实例化,但是如果你的内容是通过接口异步请求过来的,就必须在co ...
Vue.js-Day06-PM【项目实战(附带完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
axure轮播图怎么设置循环轮播_Axure教程：轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
vue 轮播写考试题和提交答案
1.最近一直忙着做项目都没时间来总结了,最近的手里的三个项目,我都采用的用vue+vant 在适当的用原生javascrpipt来做一些特效和功能的实现. 2.按照我的惯例先上效果图,有图有真相嘛. ...
bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...

轮播swiper配置选项

轮播swiper配置选项相关推荐

最新文章

热门文章