Tiny Horizontal Carousel With CSS Scroll Snap – vue-snap

Description:

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:

Tiny Horizontal Carousel With CSS Scroll Snap - vue-snap

Changelog:

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:

You Might Be Interested In:

Add Comment