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>