I reframed my question, but forgot to change the title... It doesn't need to be a free moving slider and I don't care if I need to use one or two sliders, as long as the effect is achieved.
Then you don't need any control there, just add your custom thumbs as: --- <!-- main swiper--> <div class="swiper-container">...</div> <!-- thumbs--> <div class="thumbs"> <div class="thumb"><img src="..."></div> <div class="thumb"><img src="..."></div> <div class="thumb"><img src="..."></div> </div> --- --- var swiper = new Swiper('.swiper-container'); $('.thumb').on('click', function(){ $('.thumb.selected').removeClass('selected'); swiper.slideTo($(this).index()); $(this).addClass('selected'); }) --- And add custom styles in your CSS for your thumbs and .selected thumb
My hat is off to you, good sir!