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>