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

简介：

vue-slick-carousel是一个支持SSR的Vue光滑轮播组件，继承了备受推崇的Slick Carousel的功能。

vue-slick-carousel将其完全重写为Vue组件，提供了可变宽度、延迟加载或垂直滑块等各种功能。

vue-slick-carousel从设计之初就支持SSR，并针对其做了性能提高。

vue-slick-carousel支持多种模式：简单模式、居中模式、多项显示模式、多行显示模式、可变宽度、垂直模式、懒加载、同步播放等。

安装：

1.Npm

npm i vue-slick-carousel

2.Yarn

yarn add vue-slick-carousel

3.浏览器/CDN

https://unpkg.com/vue-slick-carousel

使用：

1.引入组件

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'

2.注册

export default {
    name: 'MyComponent',
    components: { VueSlickCarousel },
  }

3.组件中使用

 <VueSlickCarousel :arrows="true" :dots="true">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </VueSlickCarousel>

其他更多样式examples

setting props、methods、events

 详细设定值

内容原文：https://madewith.cn/648

！！！例子：

simple样式：

 想呈现的样式：

步骤：

1.添加文字

<p class="carousel-p">美丽的风景</p>

2.添加css样式

.carousel-p {
    background-color: rgba(0, 0, 0, 0.5);
    width: 500px;
    height: 50px;
    line-height: 50px;
    padding-left: -28px;
    color: white;
    bottom: 66px;
    position: relative;
}
//文字p样式

/deep/.slick-dots li button:before {
    opacity: 1;
    color: white;
}
//dots颜色为白色

/deep/.slick-dots li.slick-active button:before{
    opacity: 1;
    color: red;
}
//正在播放的dot颜色为红色

/deep/.slick-dots {
    bottom: 80px;
    display: block;
    padding: 0;
    height: 30px;
    padding-left: 400px;
    width: 120px;
    height: 50px;
    line-height: 40px;
}
//调整dots位置

3.取消左右箭头并且自动播放