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

/swiper-thumbnails/

    Package Sidebar

    Install

    npm i swiper-thumbnails

    Weekly Downloads

    7

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    8.04 kB

    Total Files

    5

    Last publish

    Collaborators

    • gijsroge