当前位置: 代码迷 >> 综合 >> swiper 实现中间大,两边显示部分
  详细解决方案

swiper 实现中间大,两边显示部分

热度:68   发布时间:2023-12-23 04:22:38.0

在这里插入图片描述

<swiper :options="swiperOption"><swiper-slide ><div class="img"><img src="" alt=""></div><div class="intro"><p class="weixinshu">这是某人的微信书</p><p class="name">这是某人</p><p class="price">¥999.00<img src="../../assets/helpprice.png" alt=""></p><p class="helperImg"><img src="../../assets/logo.png" alt=""><img src="../../assets/logo.png" alt=""><img src="../../assets/logo.png" alt=""></p><div class="chushi">初始价格 888 元 已节省 <span>800</span> 元。帮他助力&gt;</div></div></swiper-slide><swiper-slide ><div class="img"><img src="" alt=""></div><div class="intro"><p class="weixinshu">这是某人的微信书</p><p class="name">这是某人</p><p class="price">¥999.00<img src="../../assets/helpprice.png" alt=""></p><p class="helperImg"><img src="../../assets/logo.png" alt=""><img src="../../assets/logo.png" alt=""><img src="../../assets/logo.png" alt=""></p><div class="chushi">初始价格 888 元 已节省 <span>800</span> 元。帮他助力&gt;</div></div></swiper-slide><swiper-slide ><div class="img"><img src="" alt=""></div><div class="intro"><p class="weixinshu">这是某人的微信书</p><p class="name">这是某人</p><p class="price">¥999.00<img src="../../assets/helpprice.png" alt=""></p><p class="helperImg"><img src="../../assets/logo.png" alt=""><img src="../../assets/logo.png" alt=""><img src="../../assets/logo.png" alt=""></p><div class="chushi">初始价格 888 元 已节省 <span>800</span> 元。帮他助力 &gt;</div></div></swiper-slide>

js部分

<script>export default {name: 'carrousel',data() {return {swiperOption: {direction: 'horizontal',loop: true,autoplay: 5000,slidesPerView: "auto",centeredSlides:true,spaceBetween: 20,},}},mounted() {}}
</script>

css部分

.swiper-container {overflow: hidden !important;}.swiper-container .swiper-wrapper .swiper-slide{ width: 4.9rem; }/* .swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 3.20rem; border-radius: .20rem;} */.swiper-container .swiper-wrapper .swiper-slide-prev{ width: 0.1rem;}/* .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 2.84rem!important;} */.swiper-container .swiper-wrapper .swiper-slide-next{  width: 0.1rem;}/* .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 2.84rem!important;} */.swiper-container .swiper-wrapper .swiper-slide-active{ width: 4.9rem;}
  相关解决方案