Small Swiper plugin that enables pre-rendered thumbnail support.
$(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.
- Currently only supported for the jQuery version of Swiper
- Only tested with horizontal slider