Home
Carousel & Slider
Performant Carousel Component – ssr-carousel

Performant Carousel Component – ssr-carousel

BKWLD Last Updated: 1 day ago

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:

v2.1.0 (03/20/2023)

  • Add option to render the carousel track as an unordered list

v2.0.0 (03/07/2023)

  • Update

v1.9.1 (02/23/2023)

  • Remove throttling of resizing

v1.9.0 (11/08/2022)

  • Remove throttling of resizing
  • Fix for v-model with loop

v1.8.0 (10/31/2022)

  • Add no-drag prop

v1.7.1 (09/28/2022)

  • Fix rendering of variable width slides

v1.7.0 (09/28/2022)

  • Add Percy snapshotting
  • Support flexible width slides
  • Fix peeking with disabled state

v1.6.0 (09/19/2022)

  • Fix responsive gutters when disabling at some breakpoints
  • Support v-model

v1.5.1 (09/01/2022)

  • Update

v1.5.0 (08/31/2022)

  • Add unique keys to clones
  • Fix arrows when looping
  • Watch peek value changes
  • Add overflow-visible prop

v1.4.2 (08/19/2022)

  • Vue 2.7 support

v1.4.1 (08/18/2022)

  • Don’t fail when vnode has no data property

v1.4.0 (04/12/2022)

  • Handle no slides or late added slides

v1.3.0 (03/24/2022)

  • Keyboard navigation and ADA features

v1.2.3 (03/04/2022)

  • Use the boundedIndex when emitting change events

v1.2.0 (03/04/2022)

  • Re-implements slide rendering
  • Fixes an issue with scrolling backwards with loop

v1.1.0 (02/28/2022)

  • Add a nuxt module
  • Add centering

v1.0.5 (02/25/2022)

  • Adds unpublicized matchPeekWhenDisabled prop which defaults to true to equalize peeking values when disabled

v1.0.3 (02/24/2022)

  • Remove undefined strings from rendered css
  • Implement fallback slot content the correct way
  • Make scope id unique based on slide count

v1.0.2 (02/24/2022)

  • Fixing scoped slots with UI components
  • Adding support for autoplay with loop

v1.0.0 (02/24/2022)

  • Adds looping
  • Adds peeking
  • Adds feathering prop
  • Arrows moved out mask
  • Changed default arrow icon
  • Added slot props to arrow and dot slots
  • Bug Fixes

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

Related Posts

Add Comment