swiper4 一個頁面多個輪播

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<!--    -->

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<!--    -->

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
        <div class="swiper-slide"> <img src='<c:url value="/img/downimg/2&${tpbh }"/>' /></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

。。。。

<script type="text/javascript">

    $(function() {// 初始化內容
        new Swiper(".swiper-container", {
            loop : true,//--可以讓圖片循環輪播
            slidesPerView : 5,
            slidesPerGroup : 5,
            loopFillGroupWithBlank : true,
            autoplayDisableOnInteraction : false,//--在點擊之后可以繼續實現輪播
            //pagination : ".swiper-pagination",//--讓小圓點顯示
            paginationClickable : true,//--實現小圓點點擊
            navigation : {
                nextEl : '.swiper-button-next',
                prevEl : '.swiper-button-prev',
            },
            observer : true,//修改swiper自己或子元素時，自動初始化swiper
            observeParents : true,//修改swiper的父元素時，自動初始化swiper
        //effect:"flip"//--可以實現3D效果的輪播
        })

    });
</script>