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