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>