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

最新推荐文章于 2022-03-18 10:34:33 发布

时光在等一个人

最新推荐文章于 2022-03-18 10:34:33 发布

阅读量3.2k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43878117/article/details/120989227

版权

简介

vue-slick-carousel是一个支持SSR的Vue光滑轮播组件，继承了备受推崇的Slick Carousel的功能。
vue-slick-carousel将其完全重写为Vue组件，提供了可变宽度、延迟加载或垂直滑块等各种功能。
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'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

注册组件

export default {
  components: {
    VueSlickCarousel
  },
}

在组件中使用

 <VueSlickCarousel
    v-bind="settings"
    class="content"
  >
    <div class="item"><h3>1</h3></div>
    <div class="item"><h3>2</h3></div>
    <div class="item"><h3>3</h3></div>
    <div class="item"><h3>4</h3></div>
    <div class="item"><h3>5</h3></div>
    <div class="item"><h3>6</h3></div>
    <div class="item"><h3>7</h3></div>
  </VueSlickCarousel>

export default {
  components: {
    VueSlickCarousel
  },
   data() {
    return {
      settings: {
        centerMode: true,
        centerPadding: '20px',
        focusOnSelect: true,
        infinite: true,
        slidesToShow: 5,
        speed: 500,
        autoplay: true
      }
    }
  },
}