帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

高性能vue轮播图/幻灯片组件 –ssr-carousel

帝国模板之家 2022-03-01 网页特效 评论

描述:

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

基本用法:

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.允许每个视图多张幻灯片。responsive您可以使用道具根据屏幕大小为每个视图指定不同的幻灯片。

<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 方法。

// goto the next slide
next()
// back to the previous slide
back()
// goto a specific slide
goto(index)
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言