glidejs / glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
https://glidejs.com
MIT License
7.2k stars 768 forks source link

Ability to control a gallery carousel with a thumbnail slider below #387

Open JayBox325 opened 4 years ago

JayBox325 commented 4 years ago

Hi, new Glide user migrated across from Slick Slider. Can we include the ability to sync two carousels to imitate thumbnail selection?

E.g. the gallery carousel that fades between slides and a scroller below?

Thanks, Jay

gautamz07 commented 4 years ago

@JayBox325 something like this slider ? LINK HERE

JayBox325 commented 4 years ago

This doesn't really answer the question, @gautamz07. I'm logging this as a feature request for Glide, because I'd like to use Glide. If I was happy using another slide for this feature, I'd have stuck with Slick.

gautamz07 commented 4 years ago

@JayBox325 iám just asking you if you meant something like that ? or different ? you misunderstood.

unnamedfeeling commented 4 years ago

I have managed to achieve this functionality - not the most elegant way, but it works for my purpose Please see my code here - https://gist.github.com/unnamedfeeling/651321e30a7dcc85c82c79123d5d7bf2

JayBox325 commented 4 years ago

@JayBox325 iám just asking you if you meant something like that ? or different ? you misunderstood.

Ah, fair enough. Apologies! I thought you were just suggesting I try a different slider. Yeah, the example you gave or the Slick carousel example I gave are both good examples of it.

julienchazal commented 4 years ago

@JayBox325 that's how i did it : https://codepen.io/julienchazal/pen/OJPwBdm

hybridvision commented 4 years ago

I was looking to achieve something similar and in the end, I found a much better alternative: https://splidejs.com/

There's a tutorial for making a thumbnail slider here: https://splidejs.com/thumbnail-slider/

mindaugasvcs commented 1 year ago

Just turn bullet buttons into thumb images, no need to overcomplicate things here.

bright-cloud-studio commented 7 months ago

Just turn bullet buttons into thumb images, no need to overcomplicate things here.

Credits and thanks to mindaugasvcs, I created a package for a CMS we use called Contao to give it support for GlideJS, immediately when I finish I was requested to have this functionality. Adding images inside the

mindaugasvcs commented 7 months ago

Just turn bullet buttons into thumb images, no need to overcomplicate things here.

Credits and thanks to mindaugasvcs, I created a package for a CMS we use called Contao to give it support for GlideJS, immediately when I finish I was requested to have this functionality. Adding images inside the bullet elements and bam, thumbnails changing the main image.

Thanks for the suggestion, I was considering diving into the code and doing this much more complicated than it needed to be.

If you have just 4 images or less you can implement it like this -> https://www.webappdev.lt/2022/LOGO/dist/product.html If you have more images you can use 2 Glide objects and synchronize them via Javascript. That way you can also make thumb images slidable / add next / prev control buttons.