简介:
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>
!!!例子:
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位置