Bootstrap：帶鍵盤控件的傳送帶

有沒有人能夠通過鍵盤控件實現Twitter Bootstrap傳送帶？我知道這將在下一個版本中實現，但現在我想知道你們中的任何一個是否能夠使其工作。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>

但我不會用這個Anywhere入門。有任何想法嗎？

編輯：這是我運行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; ?>

來源

2013-03-30 Johann

我可以看到你在哪裏定義LEFT_ARROW和RIGHT_ARROW嗎？ – flemingslone

@flemingslone嗨，我已經更新了我正在使用的當前代碼的問題。傳送帶本身正在工作，箭頭在使用鼠標時工作，但不與鍵盤一起工作。 – Johann

你的變量RIGHT_ARROW和LEFT_ARROW等於什麼，我認爲flemingslone問的是 –

下面是正確的代碼，感謝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>

來源

2013-03-30 19:09:08 Johann

因爲你使用jQuery和它的標準化你可以使用'event.which == 39'或'e.which == 39'而不是'event.keyCode' :) –

感謝的是，

更妙的是旋轉木馬事件和設備的支持 - 「點擊」吸這些天！

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

來源

2014-01-28 17:24:40

Bootstrap：帶鍵盤控件的傳送帶

回答

相關問題