页面多个 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