Swiper pagination在一个页面中多个swiper时控制错乱的问题

当一个页面多个swiper且有pagination分页器的时候,如果不精准找到el挂载的地方,会导致
pagination分页器挂载的不明确,使得不同的swiper轮播的时候,相同的pagination分页器错乱交叉控制!
同理,navigation左右控制按钮亦如此

html部分

<!-- Swiper -->
        <div id="swiper1" class="swiper-container swiper-container-initialized swiper-container-horizontal swiper1">
            <div class="swiper-wrapper" style="transition: all 0ms ease 0s; transform: translate3d(-8225px, 0px, 0px);">
                <div class="swiper-slide">
                    <img class="navSwiperImg" src="image/homeTwo_swiper.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="navSwiperImg" src="image/homeTwo_swiper.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="navSwiperImg" src="image/homeTwo_swiper.png" alt="">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                <span class="swiper-pagination-bullet" tabindex=0 role="button" aria-label="Go to slide 0"></span>
                <span class="swiper-pagination-bullet" tabindex=1 role="button" aria-label="Go to slide 1"></span>
                <span class="swiper-pagination-bullet" tabindex=2 role="button" aria-label="Go to slide 2"></span>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

script部分

var swiper = new Swiper('#swiper1', {
        autoplay: true, // 可选选项，自动滑动
        slidesPerView: 1,
        calculateHeight:true,
        loop: true,
        speed: 1000,
        pagination: {
            el: '#swiper1>.swiper-pagination', //此处精准定位swiper实例初始化的时候
            clickable: true,					pagination分页器所挂载的html代码部分
        },
        navigation: {
            // 左右控制按钮
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });