页面多个 swiper 互补冲突

Posted 2020-12-31 SeaJson

 

方法一：精简版

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

 

方法二：

$("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