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",
  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
}

Preview:

Feature-rich Slider Carousel Component - slither-slider

Changelog:

03/18/2021

  • v2.8.3: clickable slides

03/02/2021

  • v2.7.0: improved positioning and animation for slide animation

02/20/2021

  • v2.6.1: rebuild with newest dependencies

02/19/2021

  • v2.6.0: added adaptiveHeight option

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