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

Latest Article


Samsung Galaxy S8 might get a Portrait Mode with the next update

One of the hottest cell phone camera includes this year has seemingly been the Portrait mode, which enables a client to obscure the foundation of a subject along these lines giving more profundity to the Read more…


Huawei Mate 10 Lite with 18:9 display and four cameras declare

Huawei declare its leaders Mate 10 and Mate 10 Pro. In any case, in an unexpected move, Huawei has now quietly declared the spending gadget. The Huawei Mate 10 Lite too accompanies a stretched 5.9-inch Read more…


Xiaomi becomes India’s fastest growing smartphone brand

Riding on the accomplishment of its Redmi Note 4 gadget, Xiaomi has turned into the quickest developing cell phone mark in the second from last quarter of 2017, with a development of 292 for every Read more…