Swiper中文论坛

标题: swiper有这种轮播图嘛？方便给个demo或者演示地址嘛 [打印本页]

作者: mo4791526 时间: 2019-3-18 10:53
标题: swiper有这种轮播图嘛？方便给个demo或者演示地址嘛
swiper有这种轮播图嘛？方便给个demo或者演示地址嘛

1552877535(1).png (43.62 KB, 下载次数: 124)

作者: 123ap 时间: 2019-3-19 14:32
<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>
},

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

作者: mo4791526 时间: 2019-4-12 02:05

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

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

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)