2019-02-19 swiper正常轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>
<style type="text/css">
.swiper-container {
width: 600px;
height: 300px;
}
</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>
</body>
<script>
var mySwiper = new Swiper(".swiper-container",{
loop:true,
centeredSlides:true,
pagination:{
el:'.swiper-pagination',
type:'fraction',
},
initalSlide:0,
autoplay:{
delay:1500,
disableOnInteraction:false,
},
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
scrollbar:{
el:'.swiper-scrollbar',
},
})
// var index = 1
// var mySwiper = new Swiper ('.swiper-container', {
//// direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
// spaceBetween: 30,
// centeredSlides: true,
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// type: 'fraction',
// },
//// initialSlide:0,
// autoplay: {
// delay: 1500,
// disableOnInteraction: false,
// },
//
// // 如果需要前进后退按钮
//// navigation: {
//// nextEl: '.swiper-button-next',
//// prevEl: '.swiper-button-prev',
//// },
// // 如果需要滚动条
//// scrollbar: {
//// el: '.swiper-scrollbar',
//// },
//
// })
// var swiper = new Swiper('.swiper-container',{
// derection:'vertical',
// loop:true,
// spaceBetween:30,
// centeredSlides:true,
// pagination:{
// el:'.swiper-pagination',
// type:'fraction'
// },
// autoplay:{
// delay:1500,
// desbleOnInteraction:false,
// },
// navigation:{
// textEl:'.swiper-button-text',
// prevEl:'.swiper-button-prev',
// },
// scrollbar:{
// el:'.swiper-scrollbar'
// }
// })
// var swiper = new Swiper('.swiper-container', {
// direction: 'horizontal', //默认是横向，可以设置竖向vertical Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
// history: 'love', //开始浏览器前进后退 没什么用
// data:1,
// pagination: { el: '.swiper-pagination', type: 'fraction' }, initialSlide:0 //分页器
// paginationClickable :true, // 分液器换图
// loop:true, //无限循环
// nextButton: '.swiper-button-next',//前进后退按钮
// prevButton: '.swiper-button-prev',
// autoplay: 1000, // 自动轮播
// initialSlide :1, // 初始化跳到第几个轮播图
// speed:800, // 运动缓慢
// autoplayDisableOnInteraction : true, //停止自动轮播
// grabCursor : true, //抓手形状
// parallax : true, //如需要开启视差效果（相对父元素移动），设置为true并在所需要的元素上增加data- swiper-parallax属性。
// hashnav:true, // 今天研究到这 这个没实现
// hashnavWatchState:true, //和上面的关联 没明白
// replaceState:true, //代替上面两个
// setWrapperSize :true, //支持css3display：fixebox布局
// virtualTranslate : true, //让轮播停止运行 其他正常
// nextButton: '.swiper-button-next',
// width : 800, //你的slide宽度 这个参数会使自适应失效。高度也是
// // 全屏 width : window.innerWidth,
// roundLengths : true, // 当你设定slide宽为76%时，则计算出来结果为1094.4，开启后宽度取整数1094
// autoHeight: true, //高度随内容变化
// nested:true, // 父元素和子元素嵌套 相当于两个swiper
// freeMode : true, //这个参数为true后，滑到哪里就是哪里
// freeModeMomentumBounceRatio : 5, //反弹 值越大 依赖上面那个
// slidesOffsetBefore : 100, //设置与左边框间隔距离
//
// effect : 'cube', // 可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
// cube: { // 这个是方块效果 网页上有个广告效果
// slideShadows: true,
// shadow: true,
// shadowOffset: 150,
// shadowScale: 0.8
// },
// preventLinksPropagation : false, //阻止click冒泡。拖动Swiper时阻止click事件。
// coverflow: {
// rotate: 30,
// stretch: 10,
// depth: 60,
// modifier: 2,
// slideShadows : true
// }
// slidesPerView: 3, // 下面这两个只有在3d留用到
// centeredSlides: true,
// lazyLoading : true, //设为true开启图片延迟加载，使preloadImages无效。 比较麻烦
// zoom : true, //焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。
// zoomMax :5,
// zoomMin :2,
//
//
//var Swiper1 = new Swiper('#swiper-container1',{ 设置这个后两个swiper可实现方向倒转 实用 })
//var Swiper2 = new Swiper('#swiper-container2',{})
// Swiper1.params.control = Swiper2;
// Swiper1.params.controlInverse=true
</script>
</html>
