Lightweight Carousel based on CSS Scroll Snapping

by Vue.js Examples

vue-snap

Lightweight Slider/Carousel based on CSS Scroll Snap.

Please note that this lib is on very early stage. The idea behind this plugin is that to create fully responsive and well optimised Carousel. I created this as PoC for one of my biggest client, who wants to speed up his website.

View Demo View Docs View Github

Benefits:

  • Lightweight (5-10x times lighter than other libs)
  • There is no calculation or heavy logic inside (Performence)
  • Mostly all custamization via CSS!
  • You can set how many slides you want to display per current breakpoint (via css)
  • Fully responsive

Usage

There are two ways to use it.

Globally

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

Vue.use(VueSnap)

Locally

import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

export default {
  components: {
    Carousel,
    Slide
  }
}

Development

Install necessary depandancies with yarn or npm

  yarn

Run in Development mode

  yarn dev

Run in Production mode

  yarn build

Run Storybook for preview

  yarn storybook:dev

GitHub