Nested bxSlider

Question

I would like to have a vertical carousel slider and inside each vertical slide I will have a horizontal slider, I am using bxSlider and it works well for vertical slider part but when I nest the horizontal part the horizontal slider doesn't work as expected.

Any idea on that?

Answer 1

Making a slider from multiple sliders is difficult even with a well documented one like bxSlider. Fortunately, I already made something that's pretty close to what your'e looking for. I couldn't get the horizontal child sliders to move as well, I think it might have to do with the fact that the parent slider moves vertically. I used the bxSlider option preventDefaultSwipeYon the parent Slider, but it wasn't very intuitive, the user would need to use the buttons to navigate. So instead I isolated the horizontal sliders by using iframes. Each horizontal nested slider is on it's own page which sits in the same directory of the main parent page. Here's a demo, which has:

• Vertical carousel on the parent page.
• 6 horizontal sliders each on it's own separate page.
• The 6 iframes are nested in the vertical carousel.
• There are manual and automatic controls for the 6 horizontal sliders.
• There's a set of blue arrows to control the vertical slider.

Since you don't have an example posted, this is as close as I can get by guessing. I hope this helps.

Answer 2

For a site I'm working on right now we're having a thumbnail based slider inside a thumbnail based slider. It did not work as expected. As in, the inner slider did not switch slides when clicking the thumbnails.

The thing I've found to fix this, is to reload the relevant inner slider when switching the outer slider by calling reloadSlider() on the inner slider. Make sure to cache your inner sliders in an array to easily reload the relevant slider. It's easy to use the onSlideAfter option in the outer slider to set up a function that reloads the relevant inner slider after the outer slider has finished it's transition.

Unfortunately, simply using the onSlideBefore option doesn't work for this. I'm guessing because the reload will then take place too soon. This can be worked around with a very short setTimeOut. Set up an onSlideBefore function inside the outer slider, that caches the target slide and sets up a slightly delayed reload for the inner slider.

Hope this helps!