Rollover Image Effect In Vue – VueRollr

Description:

A rollover image effect that enables the visitor to switch between images with mouse hover. Also supports HTML5 videos.

It automatically transforms the images to an automatic slideshow when running on mobile.

How to use it:

1. Import the VueRollr.

import VueRollr from 'vuerollr';

2. Register the component.

export default {
  components: {
    VueRollr
  }
}

3. Add images and videos to the VueRollr component.

<template>
  <div>
    <VueRollr>
      <img src="1.jpg">
      <img src="2.jpg">
      <video loop autoplay muted>
        <source src="3.mp4">
      </video>
    </VueRollr>
  </div>
</template>

4. Props.

breakpoint: {
  type: Number,
  default: 768
},
speed: {
  type: Number,
  default: 1000
}

Preview:

Rollover Image Effect In Vue - VueRollr

Download Details:

Author: japick

Live Demo: https://vuerollr.japick.io/

Download Link: https://github.com/japick/vuerollr/archive/master.zip

Official Website: https://github.com/japick/vuerollr

Install & Download:

# NPM
$ npm i vuerollr --save

You Might Be Interested In:

Add Comment