Vueper Slides

El Teide Volcano, Spain

Features

SUPPORTS VUE 3 and VUE 2.
Supports Videos with customizable attributes.
Fully responsive and scales with its container.
Touch ready & mouse dragging for desktop.
Accessibility friendly & keyboard navigation.
Highly customizable.
Lazy loading.
Show multiple items per slides.
Infinite looping, customizable arrows or disable arrow on a slideshow end, autoplay.
Built-in parallax effect & 3D rotation.
Breakpoints with different configuration.
Slide content supports title & description, inside OR outside the current slide.
Add or remove slides on the fly, disable or enable the slideshow.
Uses CSS animations & comes with a minimum of styles (using the BEM convention).
Emitted events for callbacks, etc...
Supports RTL direction

Github project

//github.com/antoniandre/vueper-slides

If you like Vueper Slides, you canSponsor meorbuy me a coffee!

Thank you so much to all the backers! 🙏

Check out my Vue UI framework!Wave UI

Installation

You have two options: NPM or <script> tag.

Via NPM

npm i vueperslides # Vue 3.

npm i vueperslides@legacy # Vue 2.

Then import the 2 components and use it:

// In your Vue.js component.
import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'
...

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

Via <script> tag

Include the Vueper Slides script in your document <head> as follows:

<head>
  ...
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vueperslides"></script>
  <link href="https://unpkg.com/vueperslides/dist/vueperslides.css" rel="stylesheet">
</head>

Then define the component to use in your template:

// In your Vue.js component.
export default {
  components: { VueperSlides, VueperSlide }
}

How to use

Once included in your project, use as follows.
Check the examples & API sections to know more.

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

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

data: () => ({
  slides: [
    {
      title: 'Slide #1',
      content: 'Slide 1 content.'
    },
    {
      title: 'Slide #2',
      content: 'Slide 2 content.'
    }
  ]
})

Examples of Use

Here is a list of useful examples, but you can also try it yourself on codepen.io .

Simplest Ever

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

Basic with Autoplay & Infinite

The autoplay circles between all the slides and goes back to the begining after the last slide.
You can also pause and resume the autoplay from an external button using Vue refs like this:Currently playing

Slide #1

Slide title can be HTML.
And so does the slide content, why not?

Basic autoplay (with pause on mouseover) source code:

<vueper-slides autoplay>
  <vueper-slide v-for="(slide, i) in slides"
    :key="slide.id"
    :title="slide.title"
    :content="slide.content"
    :style="'background-color: ' + colors[i % 4]" />
  <template #pause>
    <i class="icon pause_circle_outline"></i>
  </template>
</vueper-slides>

This example full source code:

<button @click="$refs.myVueperSlides[`${autoPlaying ? 'pause' : 'resume'}Autoplay`]();autoPlaying = !autoPlaying">
  {{ autoPlaying ? 'Pause' : 'Resume' }}
</button>
<button @click="pauseOnHover = !pauseOnHover">Pause on mouseover</button>
<code>Currently {{ internalAutoPlaying ? 'playing' : 'paused' }}</code>

<vueper-slides
  ref="myVueperSlides"
  autoplay
  :pause-on-hover="pauseOnHover"
  @autoplay-pause="internalAutoPlaying = false"
  @autoplay-resume="internalAutoPlaying = true">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="slide.id"
    :title="slide.title"
    :content="slide.content"
    :style="'background-color: ' + colors[i % 4]" />
  <template #pause>
    <i class="icon pause_circle_outline"></i>
  </template>
</vueper-slides>

data: () => ({
  pauseOnHover: true,
  autoPlaying: true,
  internalAutoPlaying: true,
  slides: [
    {
      id: 'slide-1',
      title: 'Slide <b style="font-size: 1.3em;color: yellow">#1</b>',
      content: 'Slide title can be HTML.<br>And so does the slide content, <span style="font-size: 1.2em;color: yellow">why not?</span>'
    },
    // Other slides...
  ]
})

Custom Arrows & Bullets

Common to arrows and bullets

Inside or outside of the slideshow: arrows-outside, bullets-outside.
Disable: :arrows="false", :bullets="false".

Arrows

You can easily customize the default arrows, for instance the color .vueperslides__arrow {color: yellow}, and thickness:

You can increase default arrows thickness just with:

.vueperslides__arrow svg {stroke-width: 2}

Or you can put your own arrows icons via the #arrow-left and #arrow-right slots.

<vueper-slides :infinite="false" :bullets="false">
  <template #arrow-left>
    <i class="icon icon-arrow-left" />
  </template>

  <template #arrow-right>
    <i class="icon icon-arrow-right" />
  </template>

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

Bullets

The bullets don't show numeric indexes by default, but they are there in case you need it, like in this example.
Only display: block the span in the bullet and style as you wish.

.vueperslides__bullet .default {
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: none;
  transition: 0.3s;
  width: 16px;
  height: 16px;
}

.vueperslides__bullet--active .default {background-color: #42b983;}

.vueperslides__bullet span {
  display: block;
  color: #fff;
  font-size: 10px;
  opacity: 0.8;
}

You can even put your own bullets, using the appropriate slot.
#bullets will allow you to override the full list of bullets, whereas #bullet only lets you customize the content of each bullet.

• Using #bullet
It should be enough in almost all the cases, and you don't have to bother with accessibility compliance or triggering events.

When using the bullet slot, 3 variables are accessible:

active [boolean]: true if the current bullet is the current slide.
slideIndex [Number]: the slide index (starting from 0).
index [Number]: the current bullet index (starting from 1 for display).

<vueper-slides :infinite="false" :arrows="false">
  <vueper-slide v-for="i in 4" :key="i" :title="i.toString()" />

  <template #bullet="{ active, slideIndex, index }">
    <i class="icon">{{ active ? 'check_circle' : 'radio_button_unchecked' }}</i>
  </template>
</vueper-slides>

• Using #bullets
If you want more control on events and button wrapper. The drawback is that you have to handle more things yourself.

When using the bullets slot, 5 variables are accessible:

bulletIndexes [Array]: The computed array of slide indexes (could be like [3, 6, 9] if sliding multiple slides at once).
goToSlide [Function]: the function to call to go to a slide - accept the slide index as a parameter.
previous [Function]: the function to call to go to the previous slide.
next [Function]: the function to call to go to the next slide.
currentSlide [Number]: the current slide index (starting from 0).

Let's see a simple working example first:

<template #bullets="{ bulletIndexes, goToSlide, currentSlide }">
  <span
    v-for="(slideIndex, i) in bulletIndexes" :key="i"
    :class="{ 'active': currentSlide === slideIndex }"
    @click="goToSlide(slideIndex)">
    <i class="icon">{{ active ? 'check_circle' : 'radio_button_unchecked' }}</i>
  </span>
</template>

Now this example is more accessibility compliant for the following reasons:

The button tag allows keyboard navigation (button is focusable).
On keyup the left and right arrows of the keyboard go to the previous and next slides.
The aria-label and role attributes are defined.

In the above demo, you can try to click on a bullet point, then navigate with tab and shift + tab. You will see the focus moving but not the current slide.
To click go to the focused slide, you can press enter or space.
You can also navigate with the arrow keys and that will change the slide at the same time.
When you drag the slide (mousemove or touchmove) the current slide bullet will also be focused.

<template #bullets="{ bulletIndexes, goToSlide, previous, next, currentSlide }">
  <button
    v-for="(slideIndex, i) in bulletIndexes" :key="i"
    :class="{ 'active': currentSlide === slideIndex }"
    role="tab"
    :aria-label="`Slide ${i + 1}`"
    @click="goToSlide(slideIndex)"
    @keyup.left="previous()"
    @keyup.right="next()">
    <i class="icon">{{ active ? 'check_circle' : 'radio_button_unchecked' }}</i>
  </button>
</template>

Fractions & Progress

This example displays a slide fraction at the top left corner and a progress bar. You can show one or the other or both.
Their content can be overridden using the fraction or the progress slots which both provide the current and total properties.
The style of the fraction can be modified through the vueperslides__fractions and vueperslides__progress classes.

1 / 10

<vueper-slides fractions progress>
  <vueper-slide v-for="i in 10" :key="i" :title="i.toString()" />
</vueper-slides>

.vueperslides__progress {
  background: rgba(0, 0, 0, 0.25);
  color: #ff5252;
}

Images & Fading

This example uses images and fading as the slide transition.
The dragging ability to change slide is disabled via :touchable="false".

El Teide Volcano, Spain

Photo by Max Rive

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

// In your component's data.
slides: [
  {
    title: 'El Teide Volcano, Spain',
    content: 'Photo by Max Rive',
    // You can also provide a URL for the image.
    image: require('@/assets/images/el-teide-volcano-spain.jpg')
  },
  // Other slides.
]

Lazy Loading

In this example the images are bigger and take longer to load so you have more time to see the actual lazy loading.
The lazy load of the next slide will be triggered on the before-slide hook when you navigate from arrows, bullets, and external previous(), next() and goToSlide() function calls.
If you use the lazy-load-on-drag option, the image of the next slide you are dragging towards will also get loaded.

wb_incandescentOnce an image is loaded, it won't try to load anymore. But if the image fails to
load for any reason, it will retry the next time the slide will become visible.
2 events are fired that you may want to listen to: image-loaded,
image-failed. They both return the information of the slide being loaded.
You can use the loader slot to add a spinner or a loading message
of your choice.
I suggest you should inspect what happens in the network tab of your browser dev tools
and also try to simulate a slow network ;)

<vueper-slides lazy lazy-load-on-drag>
  <vueper-slide v-for="(slide, i) in slides" :key="i" :image="slide.image">
    <template #loader>
      <i class="icon icon-loader spinning"></i>
      <span>Loading...</span>
    </template>
  </vueper-slide>
</vueper-slides>

/* If you want to hide the slide description while loading. */
.vueperslide--loading .vueperslide__content-wrapper {
  display: none !important;
}

Link on the Whole Slide

By default, you can put a link on the title or the description of the slide.
But if you need to, you can also wrap the whole slide into a link using the link attribute of the <vueperslide> component.

You can also open the link in a new tab with the option: open-in-new that you can add on each <vueper-slide> tag.

El Teide Volcano, Spain

Photo by Max Rive

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

// In your component's data.
slides: [
  {
    title: 'El Teide Volcano, Spain',
    content: 'Photo by Max Rive',
    // You can also provide a URL for the image.
    image: require('@/assets/images/el-teide-volcano-spain.jpg'),
    link: 'https://www.maxrivephotography.com/index/C0000rU1RKCHdqwI/G0000X57AtIzuRX0/I0000Gvr9HqdtyXk'
  },
  // Other slides.
]

Complex Slide Title & Content

This example (and the next one Updating Content) shows how to use a complex html content with interpreted Vue.js keywords inside your slides.
The <vueper-slide> tag accepts 2 slots called title & content if using the html attributes :title="..." & :content="..." is too restrictive for your content.

Complex content 1 with Vue.js interpreted compilable content like components & {{ mustaches }}.

<vueper-slides>
  <vueper-slide
    v-for="i in 4"
    :key="i"
    :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]">
    <template #content>
     <i class="icon icon-check"></i>
     Complex content with Vue.js {{ 1 === 1 ? 'interpreted' : 'non-interpreted' }} compilable content & <span v-pre>{{ mustaches }}</span>.
    </template>
  </vueper-slide>
</vueper-slides>

If both :content="..." and #content are provided, the content slot will be displayed.

Updating Content Inside/Outside

This example shows how Vueper Slides keeps content up to date reactively even when placed outside of the slide itself (where the content slot resides) and in an auto-playing slideshow.
The content can be placed inside the slides (default) or outside above or bellow the slideshow.
In this example the content is set in a slot (refer to Complex Slide Title & Content for more details) and uses interpreted mustaches {{ }} and components like Vuetify's v-icon for instance.

WARNING: The following tip does not apply to Vue 3. Vue 3 resolves this internally.

The only thing that does not keep updated by default - as more costly, is the slides clones (1 prepended, 1 appended to slides list when infinite mode).
But you have an option to keep it always updated using always-refresh-clones like in this example.
This is only for particular cases like this clock and you usually don't need this as the slides are copied from original content on mounted.

:slide-content-outside="false"

10:39:35 AM

<button @click="toggleSlidesTime">Keep updating time</button>

<vueper-slides :slide-ratio="1 / 4" autoplay :slide-content-outside="contentPosition">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :style="'background-color: ' + ['#42b983', '#ff5252'][i % 2]">
    <template #content>
      <div class="vueperslide__content-wrapper" style="flex-direction: row">
        <i class="material-icons">access_time</i>
        <span>{{ slide.title }}</span>
      </div>
    </template>
  </vueper-slide>
</vueper-slides>

// In your Vue.js component.

data: () => ({
  slidesTimeTimerId: null,
  slides: [
    { title: 'Time', content: 'Time in 5 hours: ' },
    { title: 'Time', content: 'Time in 5 hours: ' }
  ]
}),
methods: {
  toggleSlidesTime () {
    if (this.slidesTimeTimerId) {
      clearInterval(this.slidesTimeTimerId)
      this.slidesTimeTimerId = 0
    } else {
      this.updateSlidesWithTime()
      this.slidesTimeTimerId = setInterval(this.updateSlidesWithTime, 1000)
    }
  },
  updateSlidesWithTime () {
    this.slides.forEach(slide => {
      let time = new Date()
      slide.title = time.toLocaleTimeString()
      slide.content = 'Time in 5 hours: ' + new Date(time.getTime() + 5 * 3600000).toLocaleTimeString()
    })
  }
}

Add / remove slides & disable slideshow

This example illustrates how to add or remove slides on the fly from a running Vueper Slides instance.
You can also completely freeze the slideshow and unfreeze when you want to.

Note that the slideshow disables controls if you have only 1 slide or none.

The arrows are also disabled on edges in this example.

Slide 1

Slide 1 content.

<button @click="appendSlide" >
  <i class="icon material-icons">add</i> Add Slide
</button>
<button @click="removeSlide" >
  <i class="icon material-icons">remove</i> Remove Slide
</button>
<button @click="toggleSlideshow" >
  <i class="icon material-icons"> {{ slideshowDisabled ? 'check_circle' : 'highlight_off'}}</i> {{ slideshowDisabled ? 'Enable' : 'Disable' }} Slideshow
</button>

<vueper-slides
  :slide-ratio="0.2"
  :infinite="false"
  disable-arrows-on-edges
  bullets-outside
  :disable="slideshowDisabled">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :title="slide.title"
    :content="slide.content"
    :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]" />
</vueper-slides>

// In your Vue.js component.

data: () => ({
  slides: [
    {
      title: 'Slide 1',
      content: 'Slide 1 content.'
    },
    {
      title: 'Slide 2',
      content: 'Slide 2 content.'
    }
  ]
}),
methods: {
  appendSlide () {
    this.slides.push({
      title: `Programmagically appended slide ${this.slides.length + 1}`,
      content: `Programmagically appended slide ${this.slides.length + 1} content.`
    })
  },
  removeSlide () {
    this.slides.pop()
  },
  toggleSlideshow () {
    this.slideshowDisabled = !this.slideshowDisabled
  }
}

Center Mode

This example demonstrates how to use Vueper Slides in a center mode.
It also has a shorter transition speed transition-speed='250' and no shadow thanks to the no-shadow class.

<vueper-slides class="no-shadow" arrows-outside bullets-outside transition-speed="250">
  <vueper-slide
    v-for="i in 6"
    :key="i"
    :title="i.toString()"
    :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]" />
</vueper-slides>

.ex--center-mode {
  width: 600px;
  max-width: 100%;
  margin: auto;
}

Emitted Events

This example demonstrates how to use the vueper slides provided events and how to style the current slide.
The events box bellow will log all the events triggered while using the slideshow along with their returned params.
Change slide to see new events in the events box bellow.
Read more about the emitted events in the emitted events section.

// event-name:params
ready:{"currentSlide":{"index":0,"title":"1","content":"","image":"","link":""}}
Listening...

<vueper-slides
  @ready="logEvents('ready', $event)"
  @previous="logEvents('previous', $event)"
  @next="logEvents('next', $event)"
  @before-slide="logEvents('before-slide', $event)"
  @slide="logEvents('slide', $event)"
  :slide-ratio="0.2"
  bullets-outside>
  <vueper-slide
    v-for="i in 6"
    :key="i"
    :title="i.toString()" />
</vueper-slides>

// In your Vue.js component.

methods: {
  logEvents (eventName, params) {
    this.events += `<strong>${eventName}</strong>, ${JSON.stringify(params)}<br>`
  }
}

.vueperslide--active:before {
  content: 'This slide is active!';
  position: absolute;
  top: -18px;
  right: -18px;
  padding: 4px 25px;
  background: orange;
  color: #fff;
  font-size: 11px;
  transform: translateX(30%) rotate(45deg);
  transform-origin: 0 0;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

Using Breakpoints

This example demonstrates how to set a different configuration per breakpoint. (Try resizing your browser above/bellow 600px width)
Define your breakpoints as an object in your component and pass the object to the <vueper-slides> tag.
Any breakpoint config you define will be applied when screen width is decreased to this value and under until next breakpoint.
Above the first breakpoint, the main configuration is applied. E.g.

// Above 1200: main config.
1200: { ... }, // From width = 1200px to width = 901.
900: { ... }, // From width = 900px to width = 601.
600: { ... } // From width = 600px to width = 0.

<vueper-slides :breakpoints="breakpoints">
  <vueper-slide
    v-for="i in 6"
    :key="i"
    :title="i.toString()"
    :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]" />
</vueper-slides>

// In your Vue.js component.

data: () => ({
  breakpoints: {
    1200: {
      slideRatio: 1 / 5
    },
    900: {
      slideRatio: 1 / 3
    },
    600: {
      slideRatio: 1 / 2,
      arrows: false,
      bulletsOutside: true
    },
    // The order you list breakpoints does not matter, Vueper Slides will sort them for you.
    1100: {
      slideRatio: 1 / 4
    }
  },
})

Dragging distance & prevent y-axis scroll for touch-enabled slideshows

This example demonstrates how to define a dragging distance and prevent the y-axis scrolling while dragging, for touch-enabled slideshows.
By default the dragging distance is 50% of the slideshow width.
This means that when you start dragging from one side you have to pass half-slide to change slide.
With this configuration the behavior is slightly different and to change slide you need to drag more that the specified distance in pixels.
If the dragging distance is lower than the specified one, the current slide remains the same.

Drag the slide horizontally of 70px from anywhere to slide.
Test the disabled y-axis scroll on touch device!

<vueper-slides :dragging-distance="70" prevent-y-scroll>
  <vueper-slide
    v-for="i in 6"
    :key="i"
    content="Drag the slide horizontally..."
    :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]" />
</vueper-slides>

Parallax Effect

This example demonstrates how to create a parallax effect on your slideshow.
Two values can be set to obtain a different parallax effect: 1 or -1 for a standard or reversed effect.
You might also want to set a fixed content on top of the moving background using the parallax-fixed-content option.

:parallax="1":parallax-fixed-content="false"

<button @click="parallax *= -1;$refs.myVueperSlides.refreshParallax()">
  reverse parallax effect
</button>
<button @click="parallaxFixedContent = !parallaxFixedContent">
  Add a fix title
</button>

<vueper-slides ref="myVueperSlides" :parallax="parallax" :parallax-fixed-content="parallaxFixedContent">
  <vueper-slide
    v-for="(slide, i) in slides" :key="i"
    :image="slide.image"
    :title="parallaxFixedContent ? slide.title : ''"
    :content="parallaxFixedContent ? slide.content : ''" />
</vueper-slides>

// In your Vue.js component.
data: () => ({
  parallax: 1,
  parallaxFixedContent: false
})

The parallax position is constantly recalculated while you scroll, or after a resize event.
If for some reason you need to manually refresh the parallax position - like in this case when you press the "Reverse parallax effect" button you can call the refreshParallax() method from a Vueper Slides Vue.js ref, like in this example.

For more details on referencing a Vueper Slides instance refer to the External Controls example.

You may experience image jumps on scroll from this considerably long documentation page which has 30+ instances of Vueper Slides.

Fixed Height

This example demonstrates how to set a fixed height on the slideshow.
The attribute fixed-height accepts either a Boolean or a String. Refer to the settings > fixed height for more details.

<vueper-slides :slide-ratio="1 / 2" fixed-height="500px">
  <vueper-slide v-for="(slide, i) in slides" :key="i" :image="slide.image" />
</vueper-slides>

You only need this CSS if you use :fixed-height="true":

/* You only need this if you use :fixed-height="true". */
.vueperslides--fixed-height { height: 500px; }

Slide Image Inside

This example demonstrates how to put the slide image in a div inside the slide container instead of the container itself.
This allows you to CSS-transform the image as you want without impacting the behavior of the slideshow and without transforming your content. E.g. rotate image but not slide description.

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

.vueperslide__image {
  transform: scale(1.5) rotate(-10deg);
}

.vueperslide__title {
  font-size: 7em;
  opacity: 0.7;
}

Show Multiple Slides & Gap

The examples bellow demonstrate how to show multiple slides at the same time.
You can choose to slide all the visible items at once or one by one.
Please Read more about Multiple Slides in the Settings > slide-multiple details.

#1. 3 visible slides, sliding 3 by 3, dragging distance of 200px

In this example a gap of 3% is applied between the slides and the option slideMultiple is set to true, allowing to slide all the visible items at the same time.
Additionally, a breakpoint is set at 800px to reduce visibleSlides & slideMultiple to 2.

<vueper-slides
  class="no-shadow"
  :visible-slides="3"
  slide-multiple
  :gap="3"
  :slide-ratio="1 / 4"
  :dragging-distance="200"
  :breakpoints="{ 800: { visibleSlides: 2, slideMultiple: 2 } }">
  <vueper-slide v-for="i in 10" :key="i" :title="i.toString()" />
</vueper-slides>

#2. 3 visible slides, sliding 1 by 1, dragging distance of 70px

When the option slideMultiple is set to false, and by default, changing slide only move by 1 slide at a time.

<vueper-slides
  class="no-shadow"
  :visible-slides="3"
  :slide-ratio="1 / 4"
  :dragging-distance="70">
  <vueper-slide v-for="i in 9" :key="i" :title="i.toString()" />
</vueper-slides>

#3. 6 visible slides, sliding 1 by 1, full-width, no arrows, dragging distance of 70px

<vueper-slides
  class="no-shadow"
  :visible-slides="6"
  :arrows="false"
  :slide-ratio="1 / 4"
  :gap="3"
  :dragging-distance="70">
  <vueper-slide v-for="i in 9" :key="i" :title="i.toString()" />
</vueper-slides>

#4. 2 visible slides, full-width, sliding 2 by 2, with arrows inside and a 5% gap

<vueper-slides
  class="no-shadow"
  :visible-slides="2"
  slide-multiple
  :slide-ratio="1 / 4"
  :gap="5"
  :arrows-outside="false">
  <vueper-slide v-for="i in 6" :key="i" :title="i.toString()" />
</vueper-slides>

#5. 3 visible slides, fading.

<vueper-slides
  fade
  :visible-slides="2"
  slide-multiple
  :slide-ratio="1 / 4"
  :arrows-outside="false">
  <vueper-slide v-for="i in 12" :key="i" :title="i.toString()" />
</vueper-slides>

3D Rotation

This example demonstrates how to use a 3D rotation transition.
Refer to the settings > 3D Rotation for more details.

<vueper-slides 3d fixed-height="300px" arrows-outside bullets-outside>
  <vueper-slide v-for="i in 9" :key="i" :title="i.toString()" />
</vueper-slides>

External Controls

This example demonstrates how to control Vueper Slides from wherever you want. ...In your code, not wherever on Earth.
By using a Vue JS reference on your slideshow, you can access any method it contains from outside.
Now that you have the power, here is a list of methods you may find useful:

previous(): go to the previous slide,
next(): go to the next slide.
getSlideData(index): returns all the available information on a slide given its index.
goToSlide(index [, options]): go to a slide given its index.
You can also call goToSlide(index, { animation: false }) to disable the animation.
refreshParallax(): recalculates the parallax position if you are using a parallax effect.
refer to the Parallax Effect example.

<button @click="$refs.myVueperSlides.previous()">Previous</button>
<!-- (6 - 1) since slide index starts from 0. -->
<button @click="$refs.myVueperSlides.goToSlide(6 - 1)">Go to slide 6</button>
<button @click="$refs.myVueperSlides.next()">Next</button>

<vueper-slides ref="myVueperSlides">
  <vueper-slide v-for="i in 10" :key="i" :title="i.toString()" />
</vueper-slides>

Sync 2 instances

This example demonstrates how to sync 2 Vueper Slides instances.
You can use any navigation controller from both sliders and keep the current slide in sync.

The key here is to disable the event emission with `{ emit: false }` when changing slide.
This allows a 2-way syncing without ending up in an infinite loop.

Navigation in sync

<vueper-slides
  ref="vueperslides1"
  @slide="$refs.vueperslides2 && $refs.vueperslides2.goToSlide($event.currentSlide.index, { emit: false })"
  :slide-ratio="1 / 4"
  :bullets="false">
  <vueper-slide
    v-for="i in 8"
    :key="i"
    :title="i.toString()"
    content="Navigation in sync"
    :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]" />
</vueper-slides>

<vueper-slides
  ref="vueperslides2"
  :slide-ratio="1 / 8"
  :dragging-distance="50"
  @slide="$refs.vueperslides1 && $refs.vueperslides1.goToSlide($event.currentSlide.index, { emit: false })"
  :visible-slides="3"
  fixed-height="100px">
  <vueper-slide
    v-for="i in 8"
    :key="i"
    @click.native="$refs.vueperslides2 && $refs.vueperslides2.goToSlide(i - 1)">
    <template #content>
      <div class="vueperslide__content-wrapper" :style="'background-color: ' + ['#ff5252', '#42b983'][i % 2]">
        <div class="vueperslide__title">{{ i.toString() }}</div>
      </div>
    </template>
  </vueper-slide>
</vueper-slides>

Another real-life gallery example

Edit this example in Codepen

<vueper-slides
  ref="vueperslides1"
  :touchable="false"
  fade
  :autoplay="false"
  :bullets="false"
  @slide="$refs.vueperslides2.goToSlide($event.currentSlide.index, { emit: false })"
  fixed-height="400px">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :image="slide.image">
  </vueper-slides>
</vueper-slides>

<vueper-slides
  class="no-shadow thumbnails"
  ref="vueperslides2"
  @slide="$refs.vueperslides1.goToSlide($event.currentSlide.index, { emit: false })"
  :visible-slides="slides.length"
  fixed-height="75px"
  :bullets="false"
  :touchable="false"
  :gap="2.5"
  :arrows="false">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :image="slide.image"
    @click.native="$refs.vueperslides2.goToSlide(i)">
  </vueper-slide>
</vueper-slides>

data: () => ({
  slides: [
    { image: require('@/assets/images/el-teide-volcano-spain.jpg') },
    { image: require('@/assets/images/chernobyl-ukraine.jpg') },
    { image: require('@/assets/images/crater-lake-oregon-usa.jpg') }
  ]
})

.thumbnails {
  margin: auto;
  max-width: 300px;
}

.thumbnails .vueperslide {
  box-sizing: border-box;
  border: 1px solid #fff;
  transition: 0.3s ease-in-out;
  opacity: 0.7;
  cursor: pointer;
}

.thumbnails .vueperslide--active {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  opacity: 1;
  border-color: #000;
}

Videos

The video feature is usable through the video prop and is completely customizable.
When changing slides, leaving a video slide will pause it, and moving to a video slide will play/resume it.
You can use videos in slides in addition to: title, content and image.

> The video prop accepted formats.

The video prop can be either a string to a video URL, if you don't need more parameters, or an object.

If a string is passed an <iframe> will be used and the URL will be used in the <iframe> src attribute.
If an object is passed, the following attributes are allowed:
- [String] webm, mp4, ogv, avi: if at least one these attributes is defined, a <video> tag will be used and the given sources will be added.
- [String] url: if defined, an <iframe> tag will be used, this string will be used in the <iframe> src attribute.
- [Object] props: an object containing all the attributes that you want to add to the <iframe> or <video> tag.
- [String] alt: The alternative text to display when the browser cannot render the <video> tag.
- [Boolean] pointerEvents: If set to false, the <iframe> or <video> tag will not be clickable (can be convenient to allow slides dragging).

Whether you are using the <video> tag or Youtube videos via <iframe> tag, a lot of parameters are available and can produce many different results.
You can check all the parameters on these pages:

Embedded Videos (using <video> tag)://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Youtube parameters (using <iframe> tag)://developers.google.com/youtube/player_parameters

Note: Most of the recent browsers do not allow autoplaying videos before the user interacted with the page.
Some allow autoplaying if the video is muted.

Example #1. Embedded videos - using <video> tag.

In this example the first video is muted to be autoplayed in most browsers, but the video does not have sound.

Blossoming flower

This video is autoplayed, played in loop, has no controls and is not reacting to user interactions.

<vueper-slides bullets-outside :dragging-distance="50">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :image="slide.image"
    :title="slide.title"
    :content="slide.content"
    :video="slide.video" />
</vueper-slides>

// In your component's data.
// If using `process.env.BASE_URL` (for Vue CLI),
// or `import.meta.env.BASE_URL` (for Vite),
// your images must be in the `public` folder.
slides: [
  {
    title: 'Blossoming flower',
    content: 'This video is autoplayed, played in loop, has no controls and is not reacting to user interactions.',
    image: `${process.env.BASE_URL}images/flower.jpg`,
    video: {
      webm: `${process.env.BASE_URL}images/flower.webm`,
      mp4: `${process.env.BASE_URL}images/flower.mp4`,
      props: { autoplay: true, loop: true, controls: false, muted: true }
    }
  },
  {
    title: 'Blossoming flower',
    content: 'This video is played once, has controls and is reacting to user interactions.',
    image: `${process.env.BASE_URL}images/flower.jpg`,
    video: {
      webm: `${process.env.BASE_URL}images/flower.webm`,
      mp4: `${process.env.BASE_URL}images/flower.mp4`
    }
  }
]

Example #2. URL videos - using <iframe> tag.

In this example the first Youtube video is not muted and autoplayed to save your data! But you could easily do so by adding autoplay=1&mute=1 to the URL.
This special first video allows dragging the content of the video to rotate the view to 360 degrees (amazing!).
That demonstrates that this slide will not be draggable or swipeable to go to the next slide. To allow dragging and swiping to the next slide, you can add pointerEvents: false to the video prop which will prevent interactions with the video.

All the Youtube parameters are passed via the URL (to be set in the video.url attribute).
See all theYoutube parameters.

The width and height of Youtube videos are set by the video format. But you can use the slideRatio prop to get close to the ratio set in the Youtube video.

Aurora Borealis

This Youtube video has params in the URL and extra attributes on the iframe.

<vueper-slides bullets-outside :dragging-distance="50">
  <vueper-slide
    v-for="(slide, i) in slides"
    :key="i"
    :image="slide.image"
    :title="slide.title"
    :content="slide.content" />
</vueper-slides>

// In your component's data.
slides: [
  {
    title: 'Aurora Borealis',
    content: 'This Youtube video has params in the URL and extra attributes on the iframe.',
    image: 'https://i.ytimg.com/vi_webp/T75IKSXVXlc/maxresdefault.webp',
    video: {
      url: 'https://www.youtube.com/embed/T75IKSXVXlc?rel=0&showinfo=0&controls=0&fs=0&modestbranding=1&color=white&iv_load_policy=3&autohide=1&enablejsapi=1',
      props: {
        allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      }
    }
  },
  {
    title: 'Fjords',
    content: 'This video can\'t be interacted with.',
    image: 'https://i.ytimg.com/vi/2sr9MGkkeks/maxresdefault.jpg',
    video: {
      url: 'https://www.youtube.com/embed/2sr9MGkkeks?controls=0&fs=0&modestbranding=1&color=white&iv_load_policy=3&autohide=1&enablejsapi=1',
      props: {
        allow: 'autoplay'
      },
      pointerEvents: false
    }
  }
]

<vueper-slides> API

This is the main tag for the slideshow.
You can set different options directly through html attributes.
You can also override the default arrows and `paused` indicator if you want.

Settings

Here is the list of all the parameters you can define on a <vueper-slides> tag.
To use in HTML Replace camelCase with kebab-case.

alwaysRefreshClones:      [Boolean],         default: false
arrows:                   [Boolean],         default: true
arrowsOutside:            [Boolean],         default: false
autoplay:                 [Boolean],         default: false
breakpoints:              [Object],          default: {}
bullets:                  [Boolean],         default: true
bulletsOutside:           [Boolean],         default: false
disable:                  [Boolean],         default: false
disableArrowsOnEdges:     [Boolean],         default: false
draggingDistance:         [Number],          default: null
duration:                 [Number, String],  default: 4000
fade:                     [Boolean],         default: false
fixedHeight:              [Boolean, String], default: false
fractions:                [Boolean],         default: false
gap:                      [Number],          default: 0
infinite:                 [Boolean],         default: true
initSlide:                [Number],          default: 1
lazy:                     [Boolean],         default: false
lazyLoadOnDrag:           [Boolean],         default: false
pageScrollingElement:     [String],          default: ""
parallax:                 [Boolean, Number], default: false
parallaxFixedContent:     [Boolean],         default: false
pauseOnHover:             [Boolean],         default: true
pauseOnTouch:             [Boolean],         default: true
preventYScroll:           [Boolean],         default: false
progress:                 [Boolean],         default: false
rtl:                      [Boolean],         default: false
slideContentOutside:      [Boolean, String], default: false
slideContentOutsideClass: [String],          default: ""
slideImageInside:         [Boolean],         default: false
slideMultiple:            [Boolean],         default: false
slideRatio:               [Number],          default: 1/3
touchable:                [Boolean],         default: true
transitionSpeed:          [Number, String],  default: 600
visibleSlides:            [Number],          default: 1
3d:                       [Boolean],         default: false

alwaysRefreshClones, Type: [Boolean], Default: false
WARNING: Don't use in Vue 3. Vue 3 resolves this internally and you don't need this option anymore.
With the infinite mode, the clones (What are clones?) are created with a copy of content in the mounted Vue.js lifecycle hook.
If you modify the content of the slides after it's mounted, the option alwaysRefreshClones will make sure to always keep the clones up to date.
By default this parameter is disabled to save up operations. In most cases you should not need it.
arrows, Type: [Boolean], Default: true
Disable or enable the navigation arrows.
You can also override the arrows by providing them in the html content of the <vueper-slides>.
See this setting live in the Arrows & Bullets example.
arrowsOutside, Type: [Boolean], Default: false
Place the navigation arrows outside of the slideshow (on left and right).
See this setting live in the Center mode example.
If you place arrows outside on a full screen slideshow you won't be able to see the arrows.
autoplay, Type: [Boolean], Default: false
Plays a slideshow automatically. Changing slide after a defined amount of time (set in duration).
See this setting live in the Basic with Autoplay example.
breakpoints, Type: [Object], Default: {}
With this option you can provide different configurations to apply to the slideshow at a particular screen width.
See this setting live in the Using Breakpoints example.
bullets, Type: [Boolean], Default: true
Disable or enable the slides pagination (bullet points).
bulletsOutside, Type: [Boolean], Default: false
If bullets is set to true, place the slides index inside or outside the slideshow track.
See this setting live in the Arrows & Bullets example.
disable, Type: [Boolean], Default: false
Disable or enable the whole slideshow. All the slides will remain as is and the slideshow freezes on the current slide. No autoplay and no possible action.
disableArrowsOnEdges, Type: [Boolean], Default: false
Disable the left or right arrow when respectively, no previous or no next slides are available.
Check the Add / remove slides & disable slideshow example.
Setting disableArrowsOnEdges to true will also prevent infinite sliding and dragging behavior beyond limits.
draggingDistance, Type: [Number], Default: null
With this option you can provide a specific dragging distance for touch-enabled slideshows.
See this setting live in the Dragging distance & prevent y-axis scroll example.
duration, Type: [Number, String], Default: 4000
When autoplay in on, defines an amount of time in milliseconds before the autoplaying slideshow changes slide automatically.
You can also override this global duration from each slide using the duration property on the <vueper-slide> tag.
fade, Type: [Boolean], Default: false
Sets the transition type to fade when changing slide.
By default the slideshow slides when changing slide (and so fade is set to false).
See this setting live in the Images & Fading example.
fixedHeight, Type: [Boolean, String], Default: false
The attribute fixed-height accepts either a Boolean or a String:
- A string made of the height amount and the CSS unit will set the height directly.
  E.g. "200px", "200vh", "200%".
  It will not work if you don't provide a unit.
- A boolean true value will let you set the height from your CSS.
  E.g. :fixed-height="true", or just fixed-height.
See this setting live in the Fixed Height example.
fractions, Type: [Boolean], Default: false
Disable or enable the fractional representation of `current slide / total slides`.
You can override this via the fractions slot.
gap, Type: [Number], Default: 0
Set a gap between all the slides. The gap is set in percentage of the slideshow width.
infinite, Type: [Boolean], Default: true
When set to true, the slideshow acts like a carousel.
Going to the next slide or previous slide when respectively on last slide or first slide, will seemlessly take the other end's slide and continue from that slide position but not breaking the transition direction.
See this setting live in the Simplest Ever example.
How it works: when creating the slideshow or adding / removing slides, the first and last slides are cloned at each opposite end of the slideshow. When clicking an arrow or dragging beyond the first or last slide, the clone will appear then it will snap back to the same original slide at the other end of slideshow without you noticing.
Infinite sliding is only possible with the sliding transition, as a fade transition slideshow does not need such effect.
initSlide, Type: [Number], Default: 1
Init the slideshow with a specific slide as the active slide.
lazy, Type: [Boolean], Default: false
Lazy loads each slide image when the slide becomes visible.
Lazy loading will be triggered in the before-slide hook for all the images of the slides becoming visible.
E.g. if :visible-slides="2" then 2 images will be loaded.
lazyLoadOnDrag, Type: [Boolean], Default: false
Lazy loads the next slide images while user is dragging towards that slide.
The load of the next slide image will be triggered in the before-slide hook.
pageScrollingElement, Type: [String], Default: ''
When using parallax, the slides position is calculated from the scroll offset of the document. Use this option to specify another DOM element selector if it's not the HTML document itself that is scrollable.
parallax, Type: [Boolean, Number], Default: false
When set to true, 1 or -1, adds a parallax effect on the slideshow.
If -1 is given, the parallax effect is reversed and the image will go in the opposite way of the scrolling direction.
See this setting live in the Parallax Effect example.
The parallax algorythm is smart and has 2 advantages in comparison to Vuetify's v-parallax for instance:
1. It stops the calculations and DOM updates when the slideshow is not in viewport.
  It also stops requesting more browser optimizations (will-change CSS property) when not in viewport.
2. The height of the image to animate is set by the slideshow height and update naturally by itself on resize to keep the same ratio. As it is not a fixed heigh, you don't need to re-calculate the image height on resize to keep your image ratio.
parallaxFixedContent, Type: [Boolean], Default: false
Allows the slide title and/or content to be fixed on top of the moving background.
See this setting live in the Parallax Effect example.
pauseOnHover, Type: [Boolean], Default: true
If autoplay is on, setting pauseOnHover stops the autoplay while hovering then resets to the defined duration when you stop hovering.
See this setting live in the Basic with Autoplay example.
pauseOnTouch, Type: [Boolean], Default: true
If autoplay is on, setting pauseOnTouch stops the autoplay as soon as you touch any element contained in the slideshow.
When you touch outside of the slideshow, the autoplay resumes.
See this setting live in the Basic with Autoplay example.
preventYScroll, Type: [Boolean], Default: false
For touch-enabled slideshows, enable or disable the Y-axis scroll while dragging slides.
See this setting live in the Dragging distance & prevent y-axis scroll example.
progress, Type: [Boolean], Default: false
Disable or enable the top linear progress bar.
You can override this via the progress slot.
rtl, Type: [Boolean], Default: false
Sets the slideshow to an RTL direction (right to left).
slideContentOutside, Type: [Boolean, String], Default: false, Values: [false, 'top', 'bottom']
Display the current slide title & content outside the slide.
You can position the content above or under the slideshow with the keywords top & bottom.
See this setting live in the Images & Fading example.
slideContentOutsideClass, Type: [String], Default: ""
With this option you can have a specific CSS class to style your slide contents when it's outside the active slide.
slideImageInside, Type: [Boolean], Default: false
A <div class="vueperslide__image"> will be created inside each slide.
This will allow you to CSS transform the slides images with no impact on slideshow behavior.
See this setting live in the Slide Image Inside example.
slideMultiple, Type: [Boolean], Default: false
Allows you to slide multiple items at once when clicking arrows, or on drag.
The number to slide if slideMultiple is set to true is always equal to visibleSlides.
See this setting live in the Show Multiple Slides & Gap example.
WARNING
The infinite mode is not supported with the visible-slides option for now.
- CSS class no-shadow:
  In some cases like in the first 3 examples, you will not want the default inner top and bottom shadow (the fourth example has it). To remove it, add the class no-shadow on the <vueper-slides> tag.
  Refer to the example source code.
- Arrows & bullets outside by default:
  In most cases you will want to have the arrows and bullets outside, so if visible-slides is set, arrows and bullets will be outside by default.
  You can override this by explicitly setting :arrows-outside="false", or :bullets-outside="false".
- Slide 1 by 1 with fading:
  The fade transition is designed for all the visible slides to change at once (:slide-multiple="true").
  If you try to change slides 1 by 1 :slide-multiple="false" with multiple visible slides, you should use the slide transition instead.
When the infinite & slide-multiple options are off, Vueper Slides will keep the active slide at the most middle position as possible while you slide, unless it would create a blank space (like if active slide is on a side).
E.g.
- With 3 items, active slide will be at position 2
- With 5 items, active slide will be at position 3
- With even numbers of items, active slide will be at position visibleItemsCount / 2
slideRatio, Type: [Number], Default: 1/3
Sets the slideshow ratio so it will naturally stay ratio-ed on different browser width.
See the Events example or Using Breakpoints example.
More examples are available in a Codepen demo .
Setting the ratio avoids heavier javascript width and height calculations on resize.
But thanks to the default value, Vueper Slides' got your back if you don't set any.
You can easily define different ratios for different viewport sizes by using the breakpoints option.
If you prefer you can also define breakpoints in your own CSS overriding the slides ratio.
If pauseOnHover is set to true the autoplay stops while hovering then resets to the defined duration when you stop hovering.
touchable, Type: [Boolean], Default: true
Whether the slideshow should allow slide dragging to change slide or not.
If set to true, dragging will be possible on both touchable device or desktop with mouse.
See this setting live in the Simplest Ever example.
The default threshold to change slides is the half of the slideshow width.
Start dragging from either end of the slide and as soon as you pass the half of the slideshow you can release the dragging to finish the slide change.
If you don't like the default dragging behavior, you can define a draggingDistance in pixels.
If one is defined, when you start a dragging event (touch or click) the slide's closest end won't snap to your cursor position.
transitionSpeed, Type: [Number, String], Default: 600
Defines how long the transition from a slide to another will last - in milliseconds.
See this setting live in the Center mode example.
visibleSlides, Type: [Number], Default: 1
Allows you to show multiple items per slide.
You can then decide to slide items one by one or by the same amount as visibleSlides, using slideMultiple.
See this setting live in the Show Multiple Slides & Gap example.
3d, Type: [Boolean], Default: false
Allows you to slide one slide at a time with a 3D effect transition.
You can combine this with fixedHeight, arrows-outside, bullets-outside and the no-shadow CSS class.
WARNING
The 3d mode is not compatible with infinite sliding, fade, slide-multiple, visible-slides & parallax features.
This is mainly due to the complexity of placing more than 4 slides on a cube in 3D, Adapting to all these features would decrease the overall performance of the slideshow.
See this setting live in the 3D Rotation example.

Emitted Events

Here is the list of all the available events. To see them in action you can check the Events example.

ready
Fired right after the initialization of the slideshow is complete.
No parameter available.
previous
Fired when going to the previous slide either from user drag or from slideshow arrows or from keyboard arrows.
This event happens before the `before-slide` event and the next slide is not yet available.
This event returns an object containing:
- currentSlide: object containing the slide index, title, content, image & link of the current slide.
next
Fired when going to the next slide either from user drag or from slideshow arrows or from keyboard arrows.
This event happens before the `before-slide` event and the next slide is not yet available.
This event returns an object containing:
- currentSlide: object containing the slide index, title, content, image & link of the current slide.
before-slide
Fired on slide change, just before the effective change.
This event returns an object containing:
- currentSlide: object containing the slide index, title, content, image & link of the current slide.
- nextSlide: object containing the slide index, title, content, image & link of the next slide.
slide
Fired on slide change, just after the effective change.
This event returns an object containing:
- currentSlide: object containing the slide index, title, content, image & link of the new current slide.
autoplay-pause
Fired when autoplay is set to true, and a pause has been triggered either by a mouseover or by calling the function pauseAutoplay() via Vue refs.
This event returns an object containing:
- currentSlide: object containing the slide index, title, content, image & link of the new current slide.
autoplay-resume
Fired when autoplay is set to true, and a pause has been triggered either by a mouseover and mouseout or by calling the function resumeAutoplay() via Vue refs.
This event returns an object containing:
- currentSlide: object containing the slide index, title, content, image & link of the new current slide.
image-loaded
Fired when lazy is set to true, and the image succeeded to load.
This event returns an object containing the information of the slide to load.
image-failed
Fired when lazy is set to true, and the image failed to load.
This event returns an object containing the information of the slide to load.

<vueper-slide> API

Settings

The following options can be applied to every <vueper-slide> tag.

image:     [String], default: ''
title:     [String], default: ''
content:   [String], default: ''
link:      [String], default: ''
openInNew: [Boolean, String], default: false // Open a link in a new tab and support custom target.
video:     [String, Object], default: '' // Add a video on a slide.
duration:  [Number], default: 0 // Override the global slide duration when autoplaying.

Events

Here is the list of all the available events on the name="vueper-slide" tag.

`mouse-enter`

Fired on slide mouseenter with parameters:

slide: {Object}, // The current slide object containing: index, title, content, image, link.
el: {Object} // DOM Element.

mouse-leave
Fired on slide mouseleave with no parameter.

Styling

External CSS

Vueper Slides is very easy to style with CSS.
Only the required styles - for a well-functioning slideshow - are embedded inside the library.
As the other cosmetic styles are externalized, it is your call to include it (refer to Installation) or redo everything.
If you choose to include it as it will probably save you some time, place your overrides after the Vueper Slides CSS include.

If you choose to include vueperslides.css but don't want the default inner shadow a 'no-shadow' class is here for that, to be placed on the <vueperslides> tag.
An example is visible on the Center Mode slideshow.

Available CSS Classes

Vueper Slides uses the BEM naming convention. Styling any element should be quite simple and straightforward.

You can use classes available on the vueperslides wrapper to style everything inside it.
For instance, you can use vueperslides--ready, vueperslides--fade, vueperslides--touchable, vueperslides--parallax to have specific styles according to the current configuration.
You can also use vueperslides--animated to apply a specific style on an element of the slideshow while the slideshow is animated.
In the examples above you can find style snippets for different purposes.
Don't forget to inspect an element to check the styles applied. ;)
- Arrows & Bullets example for arrows & bullets custom styles, or Center Mode example for bullets.
- Content Inside/Outside example for content layouts.
- Events example for custom styles on the current slide.
- Images & Fading example for transition style on the content using vueperslides--animated.

Notable Version Changes

Vueper Slides is constantly evolving and some changes might affect the way you use it sometimes.
Here is a list of the releases with their changes that might have an impact in your project.

After a Vueper Slides update, don't forget to refer to this section to check the possible breaking changes.

Version 3.0
Supports Vue 3. This version is not compatible with Vue 2.x.
Version 2.15
- Added the pauseOnTouch option (only for autoplay) and enables it by default.
- Always prevent the autoplay while dragging a slide and reset the autoplay timer on release. Both on desktop and touch devices.
Version 2.12
- Added support for embedded videos and URL videos like Youtube.
Version 2.11
- Added the RTL option.
Version 2.10.8
- Prevent autoscroll on slide bullets focus.
- Renamed the parallaxScrollingElement option to pageScrollingElement.
Version 2.9
- Allow providing multiple different <vueper-slide> tags in slots, instead of a <vueper-slide> with a v-for loop
- Remove the undesired first animation when slides are appearing.
Version 2.8Added lazy loading feature
Version 2.7
- Added the duration option on the <vueper-slide> tag
- The speed option is now renamed duration
Version 2.6Added progress option
Version 2.5Added parallaxFixedContent option
Version 2.4
- Added the bullets & bullet slots
- For more flexibility via slots, the default bullet is wrapped in a div with a .default class so the default style is only applied to this div.
Version 2.3 Added a gap feature
Version 2.2
- For more flexibility, the default wrapper `.vueperslide__content-wrapper` has been removed when using the slide content slot. Which means your slot content will be directly at the slide root in the `.vueperslide` tag.
  You can still wrap your slot content with the `.vueperslide__content-wrapper` class to horizontally and vertically align center:
```
<vueper-slide v-for="i in 8" :key="i">
  <template #content>
    <div class="vueperslide__content-wrapper">
      <div class="vueperslide__title">{{ i.toString() }}</div>
    </div>
  </template>
</vueper-slide>
```
- Added previous & next emitted events
- Allow using previous(), next() and goToSlide() functions without emitting event (useful for synced slideshows)
- Added a default margin bottom on the slideshow when using fixed height and bullets outside
Version 2.0
The v2 features a deep refactoring of the library, with revised logic and multiple improvements, in particular:
- Using the new Vue.js 2.6+ slots syntax is now possible!
- Slides cloning, slides rendering, and more performant & reliable content updating.
- Autoplay pause & resume - manual slide does not resume if paused.
- Hide first clone during init - on infinite mode.
- Redesigned arrows - easy to change the thickness.
- Slide deletion reliability.
- unbind all DOM events handlers on component destroy.
Breaking changes
- Removed the before-init emitted event
- Removed the slideTitle slot
- Renamed slots to kebab-case:
  - slideContent to content
  - arrowLeft to arrow-left
  - arrowRight to arrow-right
  - pausedIcon to pause
- Renamed events to kebab-case:
  - mouseover to mouse-enter
  - mouseout to mouse-leave
- The emitted event before-slide now only returns a single parameter containing the currentSlide info.
- The emitted event slide now only returns a single parameter containing the currentSlide and nextSlide info.
- If both content slot and content attribute are provided now use the slot.
- Removed refreshClonesOnDrag option and introduced alwaysRefreshClones.
Version 1.16.0
The Vueper Slides CSS file has been renamed from import 'vueperslides/dist/vueperslides.min.css' to import 'vueperslides/dist/vueperslides.css' (refer to External CSS).
Version 1.11.0
- Class vueperslides__slide is replaced with vueperslide as it concerns the <vueperslide> tag only.
- The class vueperslides__slide--active is replaced with vueperslide--active.
- The class vueperslides__slide--clone is replaced with vueperslide--clone.
- The class vueperslides__slide-content is replaced with vueperslide__content-wrapper.
- The class slide-title is replaced with vueperslide__title.
- The class slide-content is replaced with vueperslide__content.
Version 1.6.0
You now need to include Vueper Slides CSS file for default styles (refer to External CSS).
import 'vueperslides/dist/vueperslides.css'

Vueper Slides A Vue Super Slideshow / Carousel

Via NPM

Via <script> tag

Common to arrows and bullets

Arrows

Bullets

#1. 3 visible slides, sliding 3 by 3, dragging distance of 200px

#2. 3 visible slides, sliding 1 by 1, dragging distance of 70px

#3. 6 visible slides, sliding 1 by 1, full-width, no arrows, dragging distance of 70px

#4. 2 visible slides, full-width, sliding 2 by 2, with arrows inside and a 5% gap

#5. 3 visible slides, fading.

Another real-life gallery example

> The video prop accepted formats.

Example #1. Embedded videos - using <video> tag.

Example #2. URL videos - using <iframe> tag.

ready

previous

next

before-slide

slide

autoplay-pause

autoplay-resume

image-loaded

image-failed

mouse-enter

mouse-leave

Vueper Slides
A Vue Super Slideshow / Carousel

`ready`

`previous`

`next`

`before-slide`

`slide`

`autoplay-pause`

`autoplay-resume`

`image-loaded`

`image-failed`

`mouse-enter`

`mouse-leave`