Rollover Image Effect In Vue – VueRollr

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: {

3. Add images and videos to the VueRollr component.

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

4. Props.

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


Rollover Image Effect In Vue - VueRollr

Download Details:

Author: japick

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vuerollr --save

Add Comment