頁面多個 swiper 互補衝突

 

方法一：精簡版

$(".swiper-container").each(function(){
    $(this).swiper({
        loop: true,
        initialSlide :0,
        pagination:$('.swiper-pagination',this),
        nextButton: $('.arrow-right',this),
        prevButton:$('.arrow-left',this)
    });
});

 

$(".swiper-container").each(function(){

new Swiper($(this), {
  nextButton: $('.swiper-button-next', this),
  prevButton: $('.swiper-button-prev', this),
  speed: 600,
  autoplay: 3000,
  loop:true,
  autoplayDisableOnInteraction: false
});

 });

方法二：

$("ul>li").each(function(){
    var thisClass = $(this).attr("class");
    $(this).children(".swiper-container").swiper({
        loop: true,
        initialSlide :0,
        pagination: '.'+thisClass + " .swiper-pagination",
        nextButton: '.'+thisClass + " .arrow-right",
        prevButton: '.'+thisClass + " .arrow-left"
    });
});

 

 

 

 

<div class="swiper-container banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" ></div>
            <div class="swiper-slide" ></div>
            <div class="swiper-slide" ></div>
        </div>
        <div class="swiper-pagination banner"></div>
    </div>
    <div class="swiper-container banner1 "> 
        <div class="swiper-wrapper">
            <div class="swiper-slide" ></div>
            <div class="swiper-slide" ></div>
            <div class="swiper-slide" ></div>
        </div>
        <div class="swiper-pagination banner1"></div>
    </div>

 

swiper使用

var swiper1 = new Swiper('.banner', {
    pagination: '.banner',
    direction: 'vertical',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 0,
    mousewheelControl: true
  })

var swiper2 = new Swiper('.banner1', {
    pagination: '.banner1',
    direction: 'vertical',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 0,
    mousewheelControl: true
  })

 

 

 

 

 

swiper內容變化，會從新初始化

observer: true, //修改swiper本身或子元素時，自動初始化swiper 
observeParents: true, //修改swiper的父元素時，自動初始化swiper