CODEWITHSUNDEEP
jquerysliderbxslider
user3805319
user3805319

Reputation:

Multiple BXSliders with key controls

We currently have multiple BX Sliders and instead of duplicating the JS functions and slowing the site down we've managed to run everything with the snippet below.

What we can't seem to get working with multiple sliders is allowing the user to use the ↑ and ↓ keys on the keyboard (to slide through the slides images). We did manage to do this when duplicating the original functions multiple times but not with our shorted version below.

If anyone has managed to figure this out please let us know. Thank you.

var sliderid = $.each($("ul.slides-container > li ul.ss"), function(){$(this).attr("id");});

sliderid.bxSlider({
            adaptiveHeight: true, 
            onSliderLoad: function() {
                $("body").keydown(function(e) {
                    if (e.keyCode == 40) { 
                        sliderid.goToPrevSlide();
                    } else if(e.keyCode == 38) { 
                         sliderid.goToNextSlide();
                    }
                });
            }
        });

Live URL

Upvotes: 0

Views: 154

Answers (1)

dSquared
dSquared

Reputation: 9825

You can try targeting an individual slider within the onSliderLoad function rather than the variable that contains all the sliders like so:

$('ul.slides-container > li ul.ss').each(function(){
    var slider = $(this).bxSlider({
        adaptiveHeight: true, 
        onSliderLoad: function(){
            $('body').keydown(function(e){
                e.preventDefault(); // stop default page scroll

                if (e.keyCode == 40){ 
                    slider.goToPrevSlide();
                }
                else if (e.keyCode == 38){ 
                    slider.goToNextSlide();
                }
            });
        }
    });
});

Example JSFiddle.

I hope this helps!

Upvotes: 1

Related Questions