swiper

Open full view…

Use a "free moving" slider to control another

shadenfroh
Thu, 12 Feb 2015 16:24:59 GMT

Hello, could you provide some guidelines on how to make thumbnail pagination? What I am trying to achieve is to be able to click on a thumbnail and have the slider move to the respective slide. The thumbnails should not move, but have a class indicating "active" state. Do you think this is possible? I am using version 3.

shadenfroh
Thu, 12 Feb 2015 16:59:15 GMT

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.

Vladimir Kharlampidi
Thu, 12 Feb 2015 17:28:54 GMT

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

shadenfroh
Thu, 12 Feb 2015 17:55:01 GMT

My hat is off to you, good sir!