Vue-hover-slider NPM

vue-hover-slider

Install

npm i -S vue-hover-slider

Usage

import VueHoverSlider from 'vue-hover-slider'
Vue.use(VueHoverSlider)

<template>
  <vue-hover-slider :slides="slides" />
</template>

<script>
  export default {
    data: () => ({
      slides: [
        '/path/to/img'
      ]
    })
  }
</script>

Props

Prop	Type	Default	Description
slides (required)	`Array`	-	array of images
link	`String`	`''`	link on the slides
openInNewTab	`Boolean`	`false`	target _blank or _self if `link` was set
maxSlidesToShow	`Number`	`Infinity`	max count slides to show
defaultImage	`String`	`image url`	default image if slides are empty
height	`Number`	`250`	height of the slider

Slots

Scoped: count
Usage:

<vue-hover-slider
  :slides="slides"
  :height="350"
  :max-slides-to-show="3">
  <template #more="{ count }">
    more {{ count }} photos
  </template>
</vue-hover-slider>