Responsive & Touch-ready Slideshow For Vue - Vueper Slides

Install & Download:

# NPM
$ npm install vueperslides --save

Description:

Vueper Slides is an easy-to-use responsive & touch-ready carousel/slideshow made for Vue.js 3.

Features:

Vueper Slides is fully responsive and scales with its container.
Brand new parallax feature!
Touch-ready & mouse dragging for desktop.
Uses CSS for animations & comes with a minimum of styles (using the BEM convention). Fully customizable.
Infinite looping, customizable arrows or disable arrow on a slideshow end, autoplay.
Customizable bullets with or without numeric index.
Navigate with keyboard arrows.
Separate settings per breakpoint.
Slide content supports title & description, inside OR outside the current slide.
Add or remove slides on the fly, disable or enable the slideshow.
Events for callbacks, etc…

How to use it:

1. Import and register the component.

import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'

export default {
  components: { VueperSlides, VueperSlide },
}

2. Add the component to the template.

<vueper-slides>
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :title="slide.title"
    :content="slide.content">
  </vueper-slide>
</vueper-slides>

3. Insert your own slides to the carousel.

const slides = [
  {
    title: 'Slide #1',
    content: 'Slide 1 content.'
  },
  {
    title: 'Slide #2',
    content: 'Slide 2 content.'
  },
  {
    title: 'Slide #3',
    content: 'Slide 3 content.'
  },
  // ...
]

4. Available VueperSlides props.

alwaysRefreshClones: { type: Boolean, default: false },
arrows: { type: Boolean, default: true },
arrowsOutside: { type: Boolean, default: null },
autoplay: { type: Boolean, default: false },
breakpoints: { type: Object, default: () => ({}) },
bullets: { type: Boolean, default: true },
bulletsOutside: { type: Boolean, default: null },
disable: { type: Boolean, default: false },
// Ability to disable arrows on slideshow edges. Only if not infinite mode.
disableArrowsOnEdges: { type: [Boolean, String], default: false },
// By default when touch is enabled you have to drag from a slide side and pass 50% of
// slideshow width to change slide. This setting changes this behavior to a horizontal
// pixel amount from anywhere on slideshow.
draggingDistance: { type: Number, default: null },
duration: { type: [Number, String], default: 4000 }, // Autoplay slide duration.
infinite: { type: Boolean, default: true },
fade: { type: Boolean, default: false },
fixedHeight: { type: [Boolean, String], default: false },
fractions: { type: Boolean, default: false },
gap: { type: Number, default: 0 },
initSlide: { type: Number, default: 1 },
lazy: { type: Boolean, default: false },
lazyLoadOnDrag: { type: Boolean, default: false },
pauseOnHover: { type: Boolean, default: true },
pauseOnTouch: { type: Boolean, default: true },
parallax: { type: [Boolean, Number], default: false },
pageScrollingElement: { type: String, default: '' },
parallaxFixedContent: { type: Boolean, default: false },
// This one is not modifiable through breakpoints: event handlers are added/removed.
preventYScroll: { type: Boolean, default: false },
progress: { type: Boolean, default: false },
rtl: { type: Boolean, default: false },
slideContentOutside: { type: [Boolean, String], default: false },
slideContentOutsideClass: { type: String, default: '' },
slideImageInside: { type: Boolean, default: false },
slideMultiple: { type: [Boolean, Number], default: false },
slideRatio: { type: Number, default: 1 / 3 },
touchable: { type: Boolean, default: true },
transitionSpeed: { type: [Number, String], default: 600 },
visibleSlides: { type: Number, default: 1 },
'3d': { type: Boolean, default: false }

5. Available VueperSlide props.

clone: { type: Boolean },
image: { type: String, default: '' },
video: { type: [String, Object], default: '' },
title: { type: String, default: '' },
content: { type: String, default: '' },
link: { type: String, default: '' },
duration: { type: Number, default: 0 },
lazyloaded: { type: Boolean },
openInNew: { type: [Boolean, String] }