Skip to content

Latest commit

 

History

History
35 lines (30 loc) · 1.15 KB

README.md

File metadata and controls

35 lines (30 loc) · 1.15 KB

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