Vanilla-shuffe-images NPM

Vanilla Shuffle Images let you display and shuffle multiple images by moving cursor around or several other ways to trigger. This plugin is perfect for when you want to save space while allowing users to take a peak at what other images are related to the one displayed. It can also be used to create an interactive animation on multiple static images at once.

Similar to Shuffle Images by Pete R but Vanilla JS.

View demo.

Basic Usage

HTML Markup (Default)

  <div class="shuffle-me">
      <img src="images/1.jpg" class="active"/>
      <img src="images/2.jpg" />
      <img src="images/3.jpg" />
      ..
  </div>

Make sure all the images you want to shuffle are wrapped within a container where we will call the function on.

Vanilla js

const shuffle = new ShuffleImages({
   target: ".shuffle-me",
});
shuffle.init();

Node js

Install: npm i vanilla-shuffe-images

import ShuffleImages from 'vanilla-shuffe-images';

const shuffle = new ShuffleImages({
    target: ".shuffle-me",
});
shuffle.init();

Options

String Target: query DOM wrapper listImages
String Type: default imageMouseMove
type: imageMouseMove, imageHover, documentMouseMove, documentScroll
Config time
mouseMoveTrigger: 50 // Interger, default 50

hoverTrigger: 200 // Interger, default 100
scrollTrigger: 100 // Interger, default 100
String wrapperTarget: query DOM wrapper target Default: false