swiper有这种轮播图嘛？方便给个demo或者演示地址嘛

mo4791526

swiper有这种轮播图嘛？方便给个demo或者演示地址嘛

mo4791526

123ap 发表于 2019-3-19 14:33
我这是vue的，你如果是jq的话，直接把js参数套进去就行了，页面的话改改就ok了，你想要的效果就出来了 ...

大佬，我想问一下，loop=true时，在vue中会多复制出好几个，但是复制出来的内容并没有渲染上数据，只有静态写好的文字，请问当滑倒复制的slide的时候数据能渲染出来

123ap

我这是vue的，你如果是jq的话，直接把js参数套进去就行了，页面的话改改就ok了，你想要的效果就出来了

123ap

        <div class="adswiper">
                        <swiper ptions="swiperOption" v-if="banner_list.length > 0">
                                <swiper-slide v-for="(item, index) in banner_list" :key="index">
                                        <router-link :to="{ name:'detail', params: { id: item.building.id }}">
                                                <a><img class="lt" :src="item.image" /></a>
                                               
                                        </router-link>
                                </swiper-slide>
                        </swiper>
                </div>

css
  .adswiper {
               width: 100%;
             height: auto;
               overflow: hidden;
           }
       
              .adswiper .swiper-slide {
                  width: 93%;
                  height:200px;
                                        border-radius: 5px;

             
           }
  .adswiper img {
               display: block;
               margin: 0 auto;
               margin-top: 3.5%;
               width: 98%;
                   border-radius: 5px;
               height: 90.625%;
               border-radius: 5px;
               vertical-align: middle;
         
           }
       
           .swiper-slide-active img {
               margin-top: 0;
               width: 100%;
               height: 100%;
               border-radius: 5px;
               /*  -moz-box-shadow:0px 0px 10px #A1A1A1; -webkit-box-shadow:0px 0px 10px #A1A1A1; box-shadow:0px 0px 10px #A1A1A1;*/
             
           }

Js
swiperOption: {
                                        loop: true,
                                        initialSlide: 1,
                                        watchSlidesProgress: true,
                                        slidesPerView: 'auto',
                                        autoplay: {
                                                delay: 3000,
                                                stopOnLastSlide: false,
                                                disableOnInteraction: false,
                                        },
                                        autoplayDisableOnInteraction: true,
                                        slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
                                        centeredSlides: true //<span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">设定为true时，活动块会居中，而不是默认状态下的居左。</span>
                                },