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; 文章来源: https://blog.csdn.net/weixin_42446516/article/details/91572185