Feature-rich Slider Carousel Component – slither-slider

Description:

slither-slider is a powerful, full-featured, touch-friendly carousel plugin for Vue.js.

Features:

  • With or without controls.
  • Auto play.
  • Endless looping.
  • Fade & Slide transitions.
  • Multiple items per slide.
  • Fully responsive and mobile friendly.
  • Supports any slide content.
  • Image lazy load.

Basic Usage:

1. Import and register the component.

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

2. Add slides 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", // or 'fade'
  animationDuration: 500,
  animationEasing: "easeOutQuint",
  slidePosition: "center",
  controls: true,
  dots: true,
  animatedDots: false,
  dotLimit: false,
  fullscreen: false,
  fullscreenOffset: null,
  numberOfSlides: 1,
  slideClass: null,
  sliderClass: null,
  controlsWrapperClass: null,
  overflowHiddenPadding: { top: 0, left: 0, right: 0, bottom: 0 },
  touch: true,
  endless: false,
  cuts: "right", // or left
  gap: 30,
  loop: true,
  extras: 3,
  preserveGrid: false
}

Preview:

Feature-rich Slider Carousel Component - slither-slider

Changelog:

08/19/2020

  • v2.5.3

Download Details:

Author: dolbex

Live Demo: https://dolbex.github.io/slither-slider/

Download Link: https://github.com/dolbex/slither-slider/archive/master.zip

Official Website: https://github.com/dolbex/slither-slider

Install & Download:

You Might Be Interested In:

Add Comment