記錄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最后一張圖為空白的問題

    1. 在輪播圖片上加上nolazy   

<img src="https://img.hbhcdn.com/zhuanti/2007303/img02.jpg" nolazy alt="" />

 

on: {  //在swiper配置對象中額外添加，解決移動端，最后一個輪播不顯示，需要點擊后顯示問題
    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寬度需要固定 或者 width: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();
                })
            },
        }
    })

 

8.移動端swiper-slide需要綁定點擊時 ， 推薦使用 tab（）{}

選中swiper-slide下標可以用 

this.realIndex

var swiper = new Swiper('.swiper-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
              tap: function (swiper,event) {
                console.log（this.realIndex）//dom下標
                
              
              }}
        });        

 

 

 

..