# swiper-thumbnails

> Small Swiper plugin that enables pre-rendered static thumbnail support.

Latest version **1.1.0** (published 2018-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install swiper-thumbnails
pnpm add swiper-thumbnails
yarn add swiper-thumbnails
bun add swiper-thumbnails
```

## 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.0 |
| Published | 2018-03-05 |
| First published | 2016-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Gijs Rogé |
| Maintainers | gijsroge |

## Links

- npm: https://www.npmjs.com/package/swiper-thumbnails
- Repository: https://github.com/gijsroge/Swiper-Thumbnails
- Homepage: https://github.com/gijsroge/Swiper-Thumbnails#readme
- Issues: https://github.com/gijsroge/Swiper-Thumbnails/issues
- npm.io page: https://npm.io/package/swiper-thumbnails

## Recent versions

- 1.1.0 (latest) — 2018-03-05
- 1.0.5 — 2017-12-13
- 1.0.4 — 2017-12-13
- 1.0.3 — 2016-11-25
- 1.0.2 — 2016-11-17

## README

# Swiper-Thumbnails
Small [Swiper](http://idangero.us/swiper/#.V49zbZOrhBc) plugin that enables pre-rendered thumbnail support.

## Usage:
```javascript
$(document).ready(function(){
    var mySwiper = new Swiper ('.swiper-container', {
        // Example options
        direction: 'vertical',
        loop: true,
    })
  
    swiperThumbs(mySwiper, {
        // Our default options
        element: 'swiper-thumbnails',
        activeClass: 'is-active',
        scope: '.selector' // Parent selector that surrounds your Swiper html & Swiper thumbnail html to support multiple Swiper instances on one page.
    });
});
```

*Add anywhere to your html:*
```html
<div class="swiper-thumbnails">
    <button type="button">any html content</button>
    <button type="button">any html content</button>
    <button type="button">any html content</button>
</div>
```

If you want sliding thumbnails (useful if you have lots of thumbnails) I suggest using the official sliding thumbnails which can be found [here](http://idangero.us/swiper/demos/23-thumbs-gallery.html).

## Caveats
* Currently only supported for the jQuery version of Swiper
* Only tested with horizontal slider

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