vue高性能轮播组件 – vue-ssr-carousel

vue高性能轮播组件 – vue-ssr-carousel
插件名称 vue-ssr-carousel
发布时间 2021年10月19日
插件作者 BKWLD

ssr-carousel 是为 SSR/SSG 环境设计的高性能轮播组件。

安装和下载:

# Yarn
$ yarn add vue-ssr-carousel

# NPM
$ npm i vue-ssr-carousel

用法:

1.安装并导入ssr-carousel。

import SsrCarousel from 'vue-ssr-carousel'
import ssrCarouselCss from 'vue-ssr-carousel/index.css'

2. 向应用程序添加一个基本的轮播组件。

<ssr-carousel>
  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>
</ssr-carousel>

3. 它还允许每个视图有多个幻灯片。您可以使用responsiveprop根据屏幕大小指定每个视图的不同幻灯片。

<ssr-carousel
  :slides-per-page='5'
  :responsive='[
    {
      maxWidth: 1280,
      slidesPerPage: 3,
    },
    {
      maxWidth: 1024,
      slidesPerPage: 2,
    },
    {
      maxWidth: 767,
      slidesPerPage: 1
    }
  ]'>
  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>
  ....
</ssr-carousel>

4. 在幻灯片之间添加空间。

<ssr-carousel :slides-per-page='3' :gutter='40'>
  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>
  ...
</ssr-carousel>

5. 确定是否显示导航箭头和分页点。

<ssr-carousel :slides-per-page='3' :gutter='40' show-arrows show-dots paginate-by-slide>
  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>
  ...
</ssr-carousel>

6. API 方法。

// 转到下一张幻灯片
next()

// 返回上一张幻灯片
back()

// 转到特定幻灯片
goto(index)