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:
Changelog:
v2.3.2 (06/26/2023)
- Bugfix
v2.3.1 (06/08/2023)
- Remove console log
v2.3.0 (06/07/2023)
- detect if we are rendering a tablist
v2.2.0 (04/19/2023)
- ResizeObserver
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