Bootstrap：带键盘控制的轮播

Question

有没有人能够使用键盘控件实现 Twitter Bootstrap 轮播？我知道这将在下一个版本中实现，但现在我想知道你们中是否有人能够让它工作。

这是我当前的代码：

<script type="text/javascript">

  jQuery(document).keypress(function(event) {

  if (event.keyCode === RIGHT_ARROW) {
  $('a.carousel-control.right').trigger('click');

  }

  if (event.keyCode === LEFT_ARROW) {

  $('a.carousel-control.left').trigger('click');

  }

  });

</script>

但我对此无能为力。有什么想法吗？

编辑：这是我正在运行的 Wordpress 代码...

                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                        <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">


                            <?php if ( $post->post_type == 'portfolios' && $post->post_status == 'publish' ) {
                            $attachments = get_posts( array(

                            'post_type' => 'attachment',
                            'posts_per_page' => -1,
                            'post_parent' => $post->ID,
                            'exclude' => get_post_thumbnail_id(),
                            'orderby' => 'menu_order',
                            'order' => 'ASC'    
                                ) );

                            ?>

                            <?php if ( $attachments ) {  
                            $the_rest = array_slice($attachments, 0, 100);
                            ?>      

                            <div id="carousel-<?php the_ID(); ?>" class="featured-carousel carousel slide carousel-fade">

                                <div class="carousel-inner">

                                    <?php 
                                    global $post;
                                    $post_num = 0;  
                                    foreach( $the_rest as $attachment) :
                                    $image = wp_get_attachment_image_src( $attachment->ID, 'orion-thumb-900', false );
                                    $post_num++;
                                    ?>          

                                    <div class="item <?php if($post_num == 1){ echo 'active'; } ?>">
                                    <?php echo "<img src='" . $image[0] . "'>"; ?>  
                                      <div class="container">
                                      </div> <!-- /.container -->
                                    </div> <!-- /.item -->

                                    <?php endforeach; ?>          

                                    <?php } ?>

                                    <?php } ?>      

                                </div> <!-- /.carousel-inner -->

                                    <a class="left carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="prev">&lsaquo;</a>
                                    <a class="right carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="next">&rsaquo;</a>

                            </div> <!-- /.carousel -->

                                <section class="entry-content clearfix">

                                    <?php the_content(); ?>

                                    <?php orion_related_posts(); ?>

                                </section> <!-- end article section -->

                        </article> <!-- end article -->

                    <?php endwhile; ?>  

Answer 1

谢谢你，

轮播事件和设备支持会更好 - 现在“点击”很糟糕！

    $(document).bind('keyup', function(e) {
        if(e.which == 39){
            $('.carousel').carousel('next');
        }
        else if(e.which == 37){
            $('.carousel').carousel('prev');
        }
    });

Answer 2

这是正确的代码，感谢 DavidChase 和 Flemingslone！

<script type="text/javascript">

jQuery(document).bind('keyup', function(e) {

  if (e.keyCode==39) {
      jQuery('a.carousel-control.right').trigger('click');
  }   

  else if(e.keyCode==37){
      jQuery('a.carousel-control.left').trigger('click');
  }

});

</script>