Menu icon Foundation
Controlling 1 Obrit with another

Hi there,

We are having a problem controlling 1 slider with another. One slider has bullets (it's a list of thumbs) and the other has a big image...

Once bullet is clicked, toggling function of orbit works only for one time. Next time same function does not work.
Toggling function:
var slider = $(".thumbimages");
var slidernext = slider.parent().find(".orbit-next"); slidernext.click();

Any help greatly appreciated!

Sean

p.s. Version 4.3.2

Sliderimage

Orbitsliderjslinking

Hi there,

We are having a problem controlling 1 slider with another. One slider has bullets (it's a list of thumbs) and the other has a big image...

Once bullet is clicked, toggling function of orbit works only for one time. Next time same function does not work.
Toggling function:
var slider = $(".thumbimages");
var slidernext = slider.parent().find(".orbit-next"); slidernext.click();

Any help greatly appreciated!

Sean

p.s. Version 4.3.2

Sliderimage
Steve Trask over 5 years ago

Hi

Do you have a link? will it be plugged into a cms?

Trying to think if this is the right way to go about this if it looks the way I am thinking.

This is an example of an orbit with custom slider underneath with deep links to main slider to make it appear that it is one slider:

http://www.onlyexclusivetravel.co.uk/resort/niyama

Another way I have seen to do it is actually style the bullets of the main slider to be the thumbnails, just an idea.

Sean D over 5 years ago

Hi Steve,

I added an image of the post. I hope it's more clear.

Thanks,

Sean

Steve Trask over 5 years ago

Hi Sean,

Thanks for the image, just got a question, how is this going to act responsively? This us why we opted for the example above as the number of thumbs reduce depending on size and they are consistent size so act predictably. The way you have layed out would not be great for multiple devices.

Thanks

Steve

Sean D over 5 years ago

Hi Steve,

We change out the thumbs to be bullets for mobile versions. Mainly the user swipes with their fingers. So mobile isn't a problem in this case... Mobile has such limited space you can't really fit thumbs and a big image... This includes interchange images so it's small and fast...

It looks like I'll have to switch to something else since I got no help with the JS.

I appreciate your reply Steve! Happy holidays!

Sean