javascript - Multiple jQuery sliders: How to disable keyboard navigation for all but one slider? -

i have 6 sliders on single page, each in own section. scroll, section in view gets css class of 'active.' i'm trying disable keyboard navigation every slider except slider in active section.

my current code looks this:

$('section').not('.active').on('keydown', function(e){      if(e.keycode === 37 || e.keycode === 39) {          e.preventdefault();          return false;      }  });

no avail. move. selector wrong? there better way disable left , right keyboard navigation group of elements?

i'm using unslider.

it looks keydown event assigned document first have unbind existing event assigned plugin , bind new keydown event changes slide on next , prev.

if have used $('.banner').unslider(); (ie. css selector select sliders) initialize sliders following code job

$(function() {     var banners = $('.banner');     banners.unslider();     $(document).unbind('keydown').keydown(function(e){         var index = banners.index($('.active')[0]) + 1;         var data = $('.active').data('unslider'+index);          if(e.keycode === 37 ) {             e.preventdefault();             data.prev();             return false;         }         if(e.keycode === 39 ) {             e.preventdefault();             data.next();             return false;         }     }); }); 

sample fiddle

update

i have made small correction in selector active banner

fiddle

as can see have changed $('.active') $('div.active')

i recommend put specific class name active

you can replace $('div.active') $('div.portfolio-slider.active')