Install & Download:
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:
Changelog:
06/01/2021
- v2.11.0: update
04/26/2021
- v2.9.0: sliderTolerances
04/22/2021
- v2.8.3: Fixed left-cut animation resetting bug
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