Vue轮播/走马灯组件：vue-slick-carousel

简介

1. vue-slick-carousel是一个支持SSR的Vue光滑轮播组件，继承了备受推崇的Slick Carousel的功能。
2. vue-slick-carousel将其完全重写为Vue组件，提供了可变宽度、延迟加载或垂直滑块等各种功能。
3. vue-slick-carousel支持多种模式：简单模式、居中模式、多项显示模式、多行显示模式、可变宽度、垂直模式、懒加载、同步播放等。
   

安装

// npm
npm i vue-slick-carousel

// yarn
yarn add vue-slick-carousel

使用

1. 引入组件

import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

2. 注册组件

export default {
  components: {
    VueSlickCarousel
  },
}

3. 在组件中使用

 <VueSlickCarousel
    v-bind="settings"
    class="content"
  >
    <div class="item"><h3>1h3>div>
    <div class="item"><h3>2h3>div>
    <div class="item"><h3>3h3>div>
    <div class="item"><h3>4h3>div>
    <div class="item"><h3>5h3>div>
    <div class="item"><h3>6h3>div>
    <div class="item"><h3>7h3>div>
  VueSlickCarousel>

export default {
  components: {
    VueSlickCarousel
  },
   data() {
    return {
      settings: {
        centerMode: true,
        centerPadding: '20px',
        focusOnSelect: true,
        infinite: true,
        slidesToShow: 5,
        speed: 500,
        autoplay: true
      }
    }
  },
}

更多样例及api请查看：https://gs-shop.github.io/vue-slick-carousel