Tiny Horizontal Carousel With CSS Scroll Snap – vue-snap

vue-snap is a lightweight, performant Vue.js slider/carousel component that uses CSS Scroll Snap to automatically snap slide items to the boundary.

How to use it:

1. Import necessary resources:

import Vue from 'vue'
import VueSnap from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

2. Register the component.

Vue.use(VueSnap);
// or globally
import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'
export default {
  components: {
    Carousel,
    Slide
  }
}

3. Add slides to the carousel.

<carousel>
  <slide>
    Slide 1
  </slide>
  <slide>
    Slide 2
  </slide>
  <slide>
    Slide 3
  </slide>
  ...
</carousel>

Preview:

Changelog:

v0.7.1 (05/07/2021)

• Added: Mounted event
• Fixed: Prevent duplicated event page trigger

v0.7.0 (02/09/2021)

• Removed maxPages and its calculation
• Replace changeSlide with simpler goToSlide, for consistent behavior with exposed go-to-page API + removal of dependent method that is not in use anymore
• Split getting current page index from setting it, supporting passing the index from outside, for example goToSlide method, so in some cases the index will change, even if there was no scroll event.
• Fix support for calculating a proper current slide index, when there is nothing left to scroll

v0.6.6 (12/06/2020)

• update

v0.6.5 (12/05/2020)

• update

v0.6.4 (11/29/2020)

• changeSlide, BoundLeft, BoundRight inside slot-scope

v0.6.3 (11/23/2020)

• updated elementScrollBy function name
• updated dependencies

v0.6.2 (11/01/2020)

• Fixed Slide children method

v0.6.1 (09/24/2020)

• Removed maximum node version range
• Removed Node version max range
• Added dynamic tag support
• Added i18n support with proper validation
• Reset list-style CSS

v0.5.1 (09/21/2020)

• update

v0.5.0 (09/17/2020)

• Added Emit page and bound events
• Updated package

v0.4.0 (09/15/2020)

• Added Ability to disable arrows and arrowsOnBound
• Bugs fixed

v0.3.0 (09/05/2020)

• Added Dynamic slides support

v0.2.0 (08/29/2020)

• Added VueLazy lib
• Updated Dependencies
• Deleted Static height in wrapper
• Deleted Old directives

v0.1.0beta 9 (08/27/2020)

• Added Missing type for button arrows

Download Details:

Author: bartdominiak

Live Demo: https://vue-snap.vercel.app/?path=/docs/carousel--default

Download Link: https://github.com/bartdominiak/vue-snap/archive/master.zip

Official Website: https://github.com/bartdominiak/vue-snap

Install & Download: