记录swiper的坑

1.异形滚动

 需要设置css

.swiper-slide {
    width: auto;
}

参数设置:

var mySwiper = new Swiper('.swiper-container', {
    effect: 'coverflow',
    centeredSlides: true,
    slidesPerView: 2,
    coverflowEffect: {
        rotate: 0,
        stretch: -60,
        depth: 200,
        modifier: 1,
        slideShadows: true
    },
    slidesPerView: 'auto',
    loop: true,
    // autoplay: {
    //     delay: 2000,
    //     stopOnLastSlide: false,
    //     disableOnInteraction: false,
    // },
    spaceBetween: 0,

})

 2.解决swiper最后一张图为空白的问题

on: {  //额外添加，解决移动端，最后一个轮播不显示，需要点击后显示问题
    slideChangeTransitionEnd: function () {
    $(window).pullpageImg()
},

3.swiper匀速滚动

参数设置：

 var mySwiper2 = new Swiper('.swiper-container', {
     direction: 'vertical', //向上
     speed: 2500, //匀速时间
     autoplay: {
         delay: 0, //必须设为0
         stopOnLastSlide: false,
         disableOnInteraction: false, //手指划过后继续轮播
     },
     loop: true,
     freeMode: true,
     slidesPerView: 5, //默认显示数量
     autoplayDisableOnInteraction: false,
     spaceBetween: 5, //slide之间的margin
 });

 加入css

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear;    
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

4.wiper 在tab切换后的轮播问题

在参数配置加入

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

5.swiper效果呈现1

注意 : .swiper-slide宽度需要固定 或者 auto;

var mySwiper = new Swiper('.lunbo2', {
                     autoplay:{
                         delay: 1000,
                     },//自动轮播并设置间隔事故华北
                    initialSlide: 0,//默认设置那个图片
                    loop: true,
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    loopAdditionalSlides: 3,
                })

6.swiper效果呈现2

css

.c1 .swiper-wrapper>div {
    transform: scale(.8);
}
.c1 .swiper-wrapper>div.active {
    transform: scale(1);
}

js

var mySwiper01 = new Swiper('.c1-swiper01', {
                slidesPerView: 4,
                spaceBetween: 20,
                loop:true,
                on: {
                    slideChangeTransitionStart: function(){
                        $('.c1-swiper01 .swiper-wrapper>div').eq(this.activeIndex+1).addClass('active').prevAll().removeClass('active');  
                        $('.c1-swiper01 .swiper-wrapper>div').eq(this.activeIndex+2).addClass('active').nextAll().removeClass('active');
                    },
                },
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                }
            });

7.swiper效果呈现3

 注意: swiper-wrapper  不能随意改变overflow属性设置   否则  ios设备上 会从第二个轮播开始不显示

 dom结构

视频部分

<div class="swiper-container tu swiper-container-horizontal">
          <div class="swiper-wrapper" >
            <div class="swiper-slide">
              <div>
                <div class="vids">
                  <video src="https://vod.hbhcdn.com/dmp/p/video/182158513257918464.mp4" x5-playsinline="" webkit-playsinline="" playsinline="" poster="https://img.hbhcdn.com/dmp/h/cms/1589126400/jh-img-orig-ga_1259739113298468864_670_380_11179.jpg_668c376Q80.jpg_.webp" class="vid"></video>
                  <!--<img src="https://img.hbhcdn.com/dmp/h/cms/1589126400/jh-img-orig-ga_1259739113298468864_670_380_11179.jpg_668c376Q80.jpg_.webp" nolazy="" style="opacity: 1; position: relative;">-->
                    <div class="video-shadow">
                        <div class="controls"></div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

导航条部分

<div class="swiper-container text swiper-container-horizontal swiper-container-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible">
              <p>花嫁丽舍</p>
            </div>
          </div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>  

js部分

自定义播放暂停逻辑

$(".vids").click(function () {
    if ($(this).children("video")[0].paused) {
        $(this).addClass("active-video-box");
        $(this).children("video")[0].play();
        $(this).children(".video-shadow").removeClass();
    } else {
        $(this).children("video")[0].pause();
    }
})
$("video").on("pause", function () {
    $(this).parent().removeClass("active-video-box");
    $(this).siblings("div").addClass("video-shadow");
})
$("video").on("play", function () {
    $(this).children(".video-shadow").removeClass();
})

swiper配置部分

var gallerySwiper = new Swiper('.tu', {
        // initialSlide :num,
        observer: true,
        observeParents: true,
        spaceBetween: 10,
        thumbs: {
            swiper: {
                el: '.text',
                spaceBetween: 10,
                slidesPerView: 5,
                watchSlidesVisibility: true,
                /*避免出现bug*/
                observer: true,
                observeParents: true,
            }
        },
        on: {
            slideChange: function () {
                $('.vids').each(function () {
                    $(this).children("video")[0].pause();
                })
            },
        }
    })

..