A Performance-Focused Vue Carousel Designed For SSR/SSG Environments

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

  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>

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

      maxWidth: 1280,
      slidesPerPage: 3,
      maxWidth: 1024,
      slidesPerPage: 2,
      maxWidth: 767,
      slidesPerPage: 1
  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>

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>

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>

6. API methods.

// goto the next slide

// back to the previous slide

// goto a specific slide

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.

Related Posts


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


A Simple Fireworks Animation With JavaScript | fireworks-js

fireworks-js is a JavaScript library that adds configurable fireworks animations with sound effects to your webpage. Features 🔥 Zero dependencies ⚙️ Flexible configuration 📦 Lightweight (~3.0kB gzipped)…


[Off-Canvas] Simple and Clean Side Navigation Menu With Dropdowns | jSide Menu

JSide menu is a well-designed, simple, and clean side-scrolling menu with dropdown menus. This plugin creates a sticky hamburger button at the top of the page that…


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…