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>