MSlider (.MSLIDER)

Simple fully functional Vue slider that supports touch screens.

Attributes

Name	type	optional	description
carousel	boolean	true	To change slider to carousel mode (all other attributes depend on this one)
infinite	boolean	true	To make the infinite scrolling effect
stacked	boolean	true	To get the stacked cards looking slider
change-time	boolean	true	To make the slider change automatically in a certain time (in ms.)
pointers	boolean	true	To get slides pointers

Write the MSlider component and append any type of elements inside of it (better be of one aspect ratio). give it a ref and call next() and previous() to navigate. You can also navigate by swiping on touch screens or using pointers. You have to provide a transition for child elements to get the right sliding effect.

<template>
  <MSlider ref="slider" infinite stacked change-time="2000">
    <img src="nature.jpg" alt="3/1 picture" />
    <img src="space.jpg" alt="3/1 picture" />
    <img src="nature.jpg" alt="3/1 picture" />
    <img src="space.jpg" alt="3/1 picture" />
  </MSlider>
  <div>
    <MButton @click="$refs.slider.previous()"> Previous </MButton>
    <MButton @click="$refs.slider.next()"> Next </MButton>
  </div>
</template>
<style>
img {
  transition: all 0.2s ease;
}
</style>

MSlider (.MSLIDER)

Preview

Attributes

Usage