st
swiper-thumbnails
npm i swiper-thumbnails
st

swiper-thumbnails

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

by Gijs Rogé

1.1.0 (see all)License:MITTypeScript:Not Found
npm i swiper-thumbnails
Readme

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
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate