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



function create_taxo(){

$lab = array(
‘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’,

$ar = array(
‘hierarchical’ => true,
‘labels’ => $lab,
‘show_in’ => true,




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

<!– custom post slider—>


//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().’>’;
echo ‘</a>’;
echo ‘</h3>’;
echo ‘<span class=”post_content_slider”>’;
echo ‘</span>’;
echo ‘<span class=”btn_join”><a href=’.get_permalink().’>View Job</a></span>’;

echo ‘</li>’;


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


<!—custom end —>

Add scripts and css for slider:-

<!– jQuery library–>
<script src=”//”></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” />

var maxSlides;
width = $(window).width();

if (width < 480) {
maxSlides = 1;
} else {
maxSlides = 2;
slideWidth: 580,
minSlides: 1,
maxSlides: maxSlides,

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

Categories: Blog

0 thoughts on “Responsive carousel slider”

Leave a Reply

Related Article


Om Beach: Gokarna, Karnataka, India

The modest sanctuary town of Gokarna gloats a modest bunch of shorelines worth going by, yet Om Beach named because of its normal similarity of the Om image makes our rundown on account of its Read more…


Chowpatty Beach: Mumbai, Maharashtra, India

Chowpatty Beach is an unquestionable requirement visit for sightseers going by Mumbai, particularly amid Ganesh Chaturthi, a Hindu celebration celebrated out of appreciation for the divinity Ganesha. The celebration, which ordinarily happens in August or Read more…


Could White Wine increase Your Melanoma Risk?

Another review raises the likelihood that individuals who appreciate a glass of white wine each day may confront a somewhat lifted danger of melanoma. Add up to liquor admission was connected with a 14 percent Read more…