AnythingSlider – slider inside slider issue

[Deian]

Hello,

I’m trying to implement “slider inside slider” functionality.
http://jsfiddle.net/devact/nRw3m/

It’s working very fine except when the slider “rewinds” – for example when you go from the “last” slide to the “first” slide.
The problem (the design is broken) is only during the animation. When the animation stops – the “internal” slider is fine again.

Maybe I need to re-initialize the “internal slide somehow?
I did tried without success this:

onSlideInit: function (e, slider) {
$(‘#slider_inside’).data(‘AnythingSlider’).updateSlider();
$(‘#slider_inside’).data(‘AnythingSlider’).makeActive();
}

Thank you for any ideas.

[Mottie]

Hi Deian!

Since the slider clones the first and last panel when the `infiniteSlides` option is `true`, it would be better to not include nested sliders in the first or last panel. But if you must, it would be better to assign a class name instead of an id to the slider because of initialization and styling – [demo](http://jsfiddle.net/nRw3m/5/).

HTML

• • Slide Inside 1
  • Slide Inside 2
  • Slide Inside 3

• Slide 2
• Slide 3

Script

$(function () {
$(‘#slider’).anythingSlider({
onInitialized: function (e, slider) {
$(‘.slider_inside’).anythingSlider();
}
});
});

Then the only problem is if the user changes the internal slider, the cloned slider won’t be on the same panel when it comes into view and will quickly switch after the animation completes. So you will see the image change in a flash.

[Deian]

Mottie,

thank you for the answer.
I suspect that as workaround I’ll simple force the “internal” slider to roll-back to it’s slide1 on progress in the “main” slider.

[Author]

Posts