A Vue JS Slider Carousel Component Library

Slither Slider is a powerful, full-featured, easy-to-touch carousel plug-in for Vue.js that pretty much captures what you’re throwing.

Features:

With or without controls.
Auto play
Endless loops.
Fade and slide transitions.
Several items per slide.
Responsive and mobile compatible.
Supports any slide content.
Lazy image loading.

How to make use of it:

1. Import and register the component.

import SlitherSlider from 'slither-slider';
Vue.use(SlitherSlider)

2. Add the slices to the carousel.

<slither-slider :options="{OPTIONS HERE}">
  <!-- Slide 1 -->
  <div :style="{any styles here}">Slide 1</div>
  <!-- Slide 2 -->
  <div>
    <img src="2.jpg" />
  </div>
  <!-- Slide 3 -->
  <div>Slide 3</div>
</slither-slider>

3. Customize the carousel with the following options.

{
  autoplay: false,
  transition: "slide",
  dots: true,
  animatedDots: false,
  dotLimit: false,
  fullscreen: false,
  fullscreenOffset: null,
  controls: true,
  numberOfSlides: 1,
  controlsWrapperClass: null,
  animationDuration: 500,
  animationEasing: "easeOutQuint",
  slidePosition: "center",
  slideClass: null,
  sliderClass: null,
  secondsOnSlide: 4,
  endless: false,
  cuts: "right",
  gap: 30,
  adaptiveHeight: false,
  loop: true,
  extras: 3,
  overflowHiddenPadding: { top: 0, left: 0, right: 0, bottom: 0 },
  touch: true,
  preserveGrid: false
}

Feature-rich Slider Carousel Component, Slither Slider Plugin/Github