To create a custom responsive slider, we need to register custom post type in function.php file:

/*register post*/
add_action( ‘init’, ‘collection_register_post_types’ );
/* Registers post types. */
function collection_register_post_types() {
/* Set up the arguments for the ‘view_job’ post type. */
$album_args = array(‘public’ => true,’query_var’ => ‘view_job’,’rewrite’ => array(‘slug’ => ‘view/job’,’with_front’ => false),’supports’ => array(‘title’, ‘editor’, ‘excerpt’, ‘thumbnail’, ‘comments’, ‘custom-fields’, ‘page-attributes’),’labels’ => array(‘name’ => ‘slider’,’singular_name’ => ‘slider’,’add_new’ => ‘Add New Slide’,’add_new_item’ => ‘Add New Slide’,’edit_item’ => ‘Edit Slide’,’new_item’ => ‘New Slide’,’view_item’ => ‘View Slide’,’search_items’ => ‘Search Slide’,’not_found’ => ‘No Slide Found’,’not_found_in_trash’ => ‘No Slide Found In Trash’));
/* Register the music album post type. */
register_post_type( ‘view_job’, $album_args );
}
/*register post*/

Now add taxonomy or category for custom post type:-

/*texonomy*/

add_action(‘init’,’create_taxo’);

function create_taxo(){

$lab = array(
‘name’=>’geners’,
‘singular_name’=>’gener’,
‘search_items’=>’search geners’,
‘parent_item’=>’parent gener’,
‘edit_item’=>’edit gener’,
‘update_item’=>’update gener’,
‘add_new_item’=>’add new gener’,
‘new_item_name’=>’new item name’,
‘menu_name’=>’gener’
);

$ar = array(
‘hierarchical’ => true,
‘labels’ => $lab,
‘show_in’ => true,
‘show_admin_column’=>true,
‘query_var’=>true,
‘rewrite’=>array(‘slug’=>’gener’),
);

register_taxonomy(‘gener’,array(‘view_job’),$ar);

}

/*texonomy*/

Now create loop for front-end with bxslider class:-

<!– custom post slider—>

<?php

//Relative container
echo ‘<div class=”relative container top-slider”>’;

echo ‘<ul class=”bxslider”>’;
//Limit the slider to 5 slides
$args = array(‘post_type’ => ‘view_job’,’post_status’ => ‘publish’,
‘posts_per_page’ => -1,);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();

echo ‘<li>’;

//$class grabs the position selected in the ‘Add Slide’ page
$class = ‘showskid’;

echo ‘<h3>’;
echo ‘<a href=’.get_permalink().’>’;
the_title();
echo ‘</a>’;
echo ‘</h3>’;
echo ‘<span class=”post_content_slider”>’;
the_excerpt();
echo ‘</span>’;
echo ‘<span class=”btn_join”><a href=’.get_permalink().’>View Job</a></span>’;

echo ‘</li>’;

endwhile;

echo ‘</ul>’;
echo ‘</div>’;

?>

<!—custom end —>

Add scripts and css for slider:-

<!– jQuery library–>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<!– bxSlider Javascript file –>
<script src=”<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery.bxslider.js”></script>
<!– bxSlider CSS file –>
<link href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/jquery.bxslider.css” rel=”stylesheet” />
<script>

$(document).ready(function(){
var maxSlides;
width = $(window).width();

if (width < 480) {
maxSlides = 1;
} else {
maxSlides = 2;
}
$(‘.bxslider’).bxSlider({
slideWidth: 580,
minSlides: 1,
maxSlides: maxSlides,
});
});
</script>

More bx slider options and slider callback functions visit bx slider options page.

Categories: Blog

0 thoughts on “Responsive carousel slider”

Leave a Reply