原生JS，html,css 一个页面使用多个swiper轮播图，以及swiper轮播图单轮播，多重轮播 源码demo，以及叠加显示隐藏切换问题，多轮播嵌套鼠标悬停等问题，循环播放无停顿设置

如果你想使用轮播图请先去swiper官网查看实例看是否有你需要的swiper官网
由于下面内容过长先给大家讲几种swiperd 功能
*

（1）swiper循环播放且无停顿 功能*

css

#thumbs5 .swiper-wrapper,{
   
    -webkit-transition-timing-function: linear !important; /*之前是ease-out*/
    -moz-transition-timing-function: linear !important;
    -ms-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

js

   var mySwipers3 = new Swiper("#thumbs5 .swiper-containers", {
        spaceBetween: 10,
        loop: true,
        speed:2000,//设置匀速运行时间
        slidesPerView: 'auto',
        direction: 'vertical',
        loopedSlides: 0,
        grabCursor: true,  //开启抓手光标
        autoplay: {
            delay: 0, //将值设置为零页面会无停顿感
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
    });

（2）swiper的几种悬停（鼠标移入停止 移出继续轮播）*

 单轮播图

var mySwiper1 = new Swiper("#swiper1", {
   
    spaceBetween: 10,
    loop: true,
    speed:2000,//匀速时间
    slidesPerView: 'auto',
    direction: 'vertical',
    loopedSlides: 0,
    boolean: false,
    grabCursor: true,  //开启抓手光标
    autoplay: {
   
        delay: 0,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    }

});



//鼠标移入停止自动切换
mySwiper1.el.onmouseover = function () {
   
    mySwiper1.autoplay.stop();
}

//鼠标离开开始自动切换
mySwiper1.el.onmouseout = function () {
   
    mySwiper1.autoplay.start();
}

 双轮播图

  var galleryThumbs3 = new Swiper('#thumbs3', {
   
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,

    });
    var galleryTops = new Swiper('#gallery3', {