title: Several bootstrap carousels + keyboard controls
body: <p>There's a blog I am working on with several Twitter Bootstrap carousels. I am using the following code in order to enable keyboard controls:</p>
  
  <pre><code>&lt;!-- Script: Carousel Keyboard controls --&gt;
  
  &lt;script type="text/javascript"&gt;
  
    jQuery(document).bind('keyup', function(e) {
  
        if(e.which==39){
          jQuery('a.carousel-control.right').trigger('click');
        }   
  
        else if(e.which==37){
          jQuery('a.carousel-control.left').trigger('click');
        }
  
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This works like a charm. However, since there are different carousels once I start using keyboard controls, all carousels change at the same time.</p>
  
  <p>Is there a way to fix this?</p>
  
  <p>This is the site I'm working on: <a href="http://rubenparra.com/blog/" rel="nofollow">http://rubenparra.com/blog/</a></p>
  
  <p>Thanks!</p>