引导程序:带键盘控件的轮播 [英] Bootstrap: Carousel with keyboard controls

问题描述

有人能用键盘控件实现Twitter Bootstrap轮播吗?我知道这将在下一个版本中实现，但是现在我想知道你们中的任何一个是否能够使其工作.

Has anyone been able to implement Twitter Bootstrap carousel with keyboard controls? I know this is going to be implement in the next release, but for now I was wondering if any of you has been able to make it work.

这是我当前的代码:

<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>

但是我对此一无所知.有什么想法吗?

But I'm not getting anywhere with this. Any ideas?

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

Here's the Wordpress code I am running...

                        <?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; ?>  

推荐答案

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

Here's the correct code, thanks DavidChase and 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>

这篇关于引导程序:带键盘控件的轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！