简介

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>1</h3></div>
    <div class="item"><h3>2</h3></div>
    <div class="item"><h3>3</h3></div>
    <div class="item"><h3>4</h3></div>
    <div class="item"><h3>5</h3></div>
    <div class="item"><h3>6</h3></div>
    <div class="item"><h3>7</h3></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