Focus on current slider

[Xxoxo]

Hi, I have 5 sliders on the same page. When I scroll my page, it's the same slider that has the focus. Exemple: http://css-tricks.github.io/AnythingSlider/expand.html#&panel1-1&panel2-1&panel3-1&panel4-1&panel5-1&panel6-1&panel7-1&panel8-1

In this page, the last slider react when using keyboard arrows, not the one we see. To change that, we have to click on a navigation arrow.

Is there any solution for that ?

Sorry for my english, i'm french :)

[Mottie]

Hi @Xxoxo!

Your english is better than my French, so it's okay ;)

I think the easiest solution would be to use a plugin like inview that detects when an element is visible within the browser window. Or if you have something already in place, you can use this code snippet to detect if the element (slider) is visible in the browser viewport.

If the slider is visible, then make it active (demo)

$(function () {
    $('#slider1, #slider2')
    .anythingSlider()
    .bind('inview', function (event, visible) {
        if (visible) {
            $(this).data('AnythingSlider').makeActive();
        }
    });
});

[Xxoxo]

Thanks a lot @Mottie, that's exactly what I tried to do all my morning without success :)

Solved !