Vue SSR carousel is a performance-focused Vue carousel designed for SSR/SSG environments.

nuxt carousel ssr, vue carousel, vue carousel navigation, vue carousel arrows, vue card carousel, vue carousel library

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-ssr-carousel

# NPM
$ npm i vue-ssr-carousel

1. Install and import the SSR library.

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

2. Add a carousel component to the app.

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

3. Multiple slides per view are also allowed. You can select different slides for each show based on screen size using the responsive feature.

<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. Specify whether to show navigation arrows and pagination points.

<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)

Performant SSR Carousel Component, vue ssr carousel Plugin/Github

See Demo And Download

Official Website(BKWLD): Click Here

This superior jQuery/javascript plugin is developed by BKWLD. For extra Advanced Usages, please go to the official website.