Vue轮播/走马灯组件:vue-slick-carousel 的使用
简介:vue-slick-carousel是一个支持SSR的Vue光滑轮播组件,继承了备受推崇的Slick Carousel的功能。vue-slick-carousel将其完全重写为Vue组件,提供了可变宽度、延迟加载或垂直滑块等各种功能。vue-slick-carousel从设计之初就支持SSR,并针对其做了性能提高。vue-slick-carousel支持多种模式:简单模式、居中模式、多项显示
·
简介:
vue-slick-carousel是一个支持SSR的Vue光滑轮播组件,继承了备受推崇的Slick Carousel的功能。
vue-slick-carousel将其完全重写为Vue组件,提供了可变宽度、延迟加载或垂直滑块等各种功能。
vue-slick-carousel从设计之初就支持SSR,并针对其做了性能提高。
vue-slick-carousel支持多种模式:简单模式、居中模式、多项显示模式、多行显示模式、可变宽度、垂直模式、懒加载、同步播放等。
安装:
Npm
npm i vue-slick-carousel
Yarn
yarn add vue-slick-carousel
引入组件
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'
注册
export default {
name: 'MyComponent',
components: { VueSlickCarousel },
}
组件中使用
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
案例1
<p class="carousel-p">美丽的风景</p>
.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位置
取消左右箭头并且自动播放
<VueSlickCarousel :arrows="true" :dots="true" :autoplay="true">
</VueSlickCarousel>
更多推荐
已为社区贡献3条内容
所有评论(0)