# vanilla-shuffe-images

> 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

Latest version **1.1.7** (published 2020-02-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install vanilla-shuffe-images
pnpm add vanilla-shuffe-images
yarn add vanilla-shuffe-images
bun add vanilla-shuffe-images
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2020-02-06 |
| First published | 2020-01-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Neo Khuat |
| Maintainers | hoainam12k |

## Links

- npm: https://www.npmjs.com/package/vanilla-shuffe-images
- Repository: https://github.com/hoainam12k/vanilla-shuffe-images
- Homepage: https://github.com/hoainam12k/vanilla-shuffe-images#readme
- Issues: https://github.com/hoainam12k/vanilla-shuffe-images/issues
- npm.io page: https://npm.io/package/vanilla-shuffe-images

## Recent versions

- 1.1.7 (latest) — 2020-02-06
- 1.1.6 — 2020-02-05
- 1.1.5 — 2020-02-04
- 1.1.4 — 2020-02-03
- 1.1.3 — 2020-02-03
- 1.1.2 — 2020-02-03
- 1.1.1 — 2020-01-13
- 1.1.0 — 2020-01-12
- 1.0.3 — 2020-01-08
- 1.0.2 — 2020-01-08
- 1.0.1 — 2020-01-08
- 1.0.0 — 2020-01-08

## README

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](https://github.com/peachananr/shuffle-images) but Vanilla JS.

[View demo](https://hoainam12k.github.io/vanilla-shuffe-images/dist/).

## Basic Usage

### HTML Markup (Default)

```html
  <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

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

### Node js

Install: `npm i vanilla-shuffe-images`

```js
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`

## For developer

```
npm i
npm run dev
npm run build
```

---
_Source: https://npm.io/package/vanilla-shuffe-images · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._