swiper-thumbnails

1.1.0 • Public • Published

Swiper-Thumbnails

Small Swiper plugin that enables pre-rendered thumbnail support.

Usage:

$(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:

<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.

Caveats

  • Currently only supported for the jQuery version of Swiper
  • Only tested with horizontal slider

Readme

Keywords

none

Package Sidebar

Install

npm i swiper-thumbnails

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

8.04 kB

Total Files

5

Last publish

Collaborators

  • gijsroge