Skip to content

Instantly share code, notes, and snippets.

@About2git
Forked from srikat/bxslider-init.js
Last active August 29, 2015 14:15
Show Gist options
  • Select an option

  • Save About2git/791d0a54eed358fea42b to your computer and use it in GitHub Desktop.

Select an option

Save About2git/791d0a54eed358fea42b to your computer and use it in GitHub Desktop.
Posts Carousel in Genesis using bxSlider.
jQuery(function( $ ){
$('.posts-carousel .carousel-items').bxSlider({
minSlides: 3,
maxSlides: 9,
slideWidth: 140,
pager: false
});
});
//* Enqueue bxSlider
add_action( 'wp_enqueue_scripts', 'sk_bxslider' );
function sk_bxslider() {
wp_enqueue_style( 'bxslider-styles', get_stylesheet_directory_uri() . '/css/jquery.bxslider.css' );
wp_enqueue_script( 'bxslider-js', get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', array( 'jquery' ), '4.1.2', true );
wp_enqueue_script( 'bxslider-init', get_stylesheet_directory_uri() . '/js/bxslider-init.js', array( 'bxslider-js' ), '1.0.0', true );
}
add_action( 'genesis_after_header', 'sk_posts_carousel' );
/**
* Output 18 Posts (only those having Featured Images) while excluding the current Post.
*
* Context: Sitewide
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/posts-carousel-genesis-using-bxslider/
*/
function sk_posts_carousel() {
global $post;
// WP_Query arguments
$args = array (
'post_type' => 'post',
'posts_per_page' => '18',
'meta_query' => array(
array( 'key' => '_thumbnail_id' )
),
'post__not_in' => array( $post->ID )
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
echo '<div class="posts-carousel"><div class="wrap"><div class="carousel-items">';
while ( $query->have_posts() ) {
$query->the_post();
// each loop item
?>
<div class="carousel-item">
<a href="<?php the_permalink(); ?>">
<span class="carousel-title"><?php the_title(); ?></span>
<?php genesis_image( array( 'size' => 'thumbnail' ) ); ?>
</a>
</div>
<?php }
echo '</div></div></div>';
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
}
/* # Posts carousel using bxSlider
---------------------------------------------------------------------------------------------------- */
/* To avoid noticeable vertical movement for hover state of bxSlider's left and right arrows */
.bx-wrapper .bx-controls-direction a {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.posts-carousel {
padding-top: 40px;
}
.carousel-item {
float: left;
position: relative;
margin-right: 5px;
}
.carousel-title {
display: none;
overflow: hidden;
position: absolute;
z-index: 2;
bottom: 10px;
left: 0;
padding: 5px;
font-size: 12px;
}
.carousel-item a:hover .carousel-title {
display: block;
color: #fff;
background: #07e;
}
.posts-carousel .bx-wrapper {
margin-bottom: 0 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment