Vue輪播/走馬燈組件：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位置