1. vue-hover-slider

vue-hover-slider

vue-hover-slider

View demo

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

more

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>

License

The MIT License

Vue CLI configuration

See Configuration Reference.