Vue轮播/走马灯组件：vue

2024-07-03 08:55| 来源: 网络整理| 查看: 265

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.组件中使用 1 2 3 4

其他更多样式examples

setting props、methods、events

详细设定值

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

！！！例子：

simple样式：

想呈现的样式：

步骤： 1.添加文字美丽的风景 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.取消左右箭头并且自动播放

【本文地址】

公司简介

联系我们