最好用的轮播插件——Swiper.js

官网：https://www.swiper.com.cn/

var swiper = new Swiper('.swiper-container', {
    direction: 'horizontal',  //默认是横向，可以设置竖向vertical    Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
    history: 'love',          //开始浏览器前进后退 没什么用
    data:1,
    pagination: '.swiper-pagination',  //分页器
    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;