页面多个 swiper 互补冲突

方法一：精简版

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

原文地址：https://www.cnblogs.com/congxueda/p/9527350.html