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.
Here’s my current code:
<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?
Edit: 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">‹</a>
<a class="right carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="next">›</a>
</div> <!-- /.carousel -->
<section class="entry-content clearfix">
<?php the_content(); ?>
<?php orion_related_posts(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endwhile; ?>
thanks for that,
Even better with carousel events and devices support – ‘click’ sucks these days!
Here’s the correct code, thanks DavidChase and Flemingslone!