Ant Design Vue 走马灯 一次显示多个slide

4,778 阅读1分钟
需要实现的效果:一次显示5个slide,滚动也是一次滚动5个


我们可以看到官网展示的api上没有写此功能,百度也多为直接改css


仔细阅读查找文档后发现官方有给留后路

====》


可以看到官方给留的后路还挺多的,只是没展示在文档上,在这些api中通过名字及尝试,最终锁定这俩

slidesToScroll // 一页滚动几个
slidesToShow //一页展示几个

所需传的值都是Number

<a-carousel  
   arrows  
   :dots="false"
   :slides-to-show="5"  //一页展示5个
   :slides-to-scroll="5"// 一页滚动5个 
>    
    <div      
        slot="prevArrow" 
        class="custom-slick-arrow"  
        style="left: -20px;zIndex: 1"   
     >     
         <a-icon type="left" /> 
    </div>   
    <div      
        slot="nextArrow"
        class="custom-slick-arrow"
        style="right: -20px"
    >     
         <a-icon type="right" /> 
   </div>   
    <div v-for="(o, index) in 10" :key="index" class="musicBox">
         <h1>{{ index }}</h1>
    </div> 
</a-carousel>

最终实现效果