Performant Carousel Component – ssr-carousel

Description:

ssr-carousel is a high-performance carousel component designed for SSR/SSG environments.

Basic usage:

1. Install and import the ssr-carousel.

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

2. Add a basic carousel component to the app.

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

3. It also allows multiple slides per view. You can specify the different slides per view based on screen size using the responsive prop.

<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. Add space between slides.

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

5. Determine whether to show navigation arrows and pagination dots.

<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 methods.

// goto the next slide
next()

// back to the previous slide
back()

// goto a specific slide
goto(index)

Preview:

Performant Carousel Component - ssr-carousel

Changelog:

v0.1.5 (11/03/2021)

  • Fix vertical drag

v0.1.4 (11/01/2021)

  • Generate scope id on mount if not found

v0.1.2 (10/28/2021)

  • Fix support for other static classes on a slide

Download Details:

Author: BKWLD

Live Demo: https://vue-ssr-carousel.netlify.app/

Download Link: https://github.com/BKWLD/vue-ssr-carousel/archive/refs/heads/main.zip

Official Website: https://github.com/BKWLD/vue-ssr-carousel

Install & Download:

# Yarn
$ yarn add vue-ssr-carousel

# NPM
$ npm i vue-ssr-carousel

You Might Be Interested In:

Add Comment