vue-slick-carousel使用记录

使用iview组件的跑马灯只能一次显示一个内容，但是vue-slick-carousel的跑马灯可以控制一次显示一个内容还是同时显示多个内容，还可以设置垂直滚动的跑马灯
先把依赖下下来

npm i vue-slick-carousel

然后在页面中引入资源

import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";

作为组件添加到项目里面

components: { VueSlickCarousel },

在页面中使用

<VueSlickCarousel
  class="right-center-carousel"
  style="width: 100%"
  v-bind="carouselOptions"
 
>
  <div
    v-for="(item, index) in rightCenterCarousel"
    :key="index"
    class="insect-item"
  >
    <div class="insect-item-top">
      {{ item.name }}
    </div>
    <div class="insect-item-bottom">
      {{ item.num }}
    </div>
  </div>
</VueSlickCarousel>

添加配置项

carouselOptions: {
        infinite: true, //是否无限循环展示内容
        arrows: false, //展示箭头
        dots: false, //启用点指示器
        slidesToShow: 4, // 同时显示的项目数量
        slidesToScroll: 1, // 每次滚动的项目数量
        autoplay: true, // 自动播放
        autoplaySpeed: 2000, // 切换时间间隔
      },

如果是想要竖直滚动的话添加的配置项如下

vertical: true,
verticalSwiping: true// 垂直滑动

效果如图所示，根据上面的配置项可以隔2秒钟就向左移动一个位置

在使用这个走马灯的时候还遇到了问题，就是从接口获得的数据导致初始化的时候页面报错，无法正常显示走马灯

解决的办法就是在组件上判断一下绑定的数组的长度，长度大于0的时候，才显示走马灯

<VueSlickCarousel
            class="carousel-verticle-box"
            v-bind="carouselOptions"
            :style="{height: '100%'}"
             v-if="futureArr.length!==0"
          >