How to implement Multi row Image slider in WordPress using bx-slider


Multi row image slider is right now in demand to show clients logos specially in portfolio websites and agency websites. Single row image sliders are already available on the net few of them are free to use and some of them are paid

Width = 800px Height = 318pxmulti row image slider

But, I was not so lucky to find out multi row image slider so that i can put on my client site to show-case their high end client’s Image at http://x-plosiv.in

So i decided to search the idea one the net and found something but that was not so useful so decided to experiment with one of the simplest responsive yet easy to implement image slider bx-slider.

How Bx-slider display the slide, Here is the sample HTML code that is available on their website under example  ( I have assumed that you  already know how to add CSS and jQuey and bxslider jquery plugin and any html template ).

<div class=”slider”>
<img src =”image location”/>
<img src =”image location”/>
<img src =”image location”/>
<img src =”image location”/>
</div>

To enable bx-slider on this, all you need to add the following code before closing </body> tag

<script>
$(function(){
$(‘.slider’).bxSlider();
});

</script>

That’s it.

How to display multiple Row Image slider

The basic idea was all the images was places in a single block element ‘slider’ and if We could define multiple-div to show all these images, Does bx-slider will be able to generate the show. The HTML layout of bx-slider is now something like this

<div class="slider">
<div>
  <img src="image"/>
  </img src ="image">
  </img src ="image">
  </img src ="image">
</div>
<div>
  <img src="image"/>
  </img src ="image">
  </img src ="image">
  </img src ="image">
</div>
</div> <!--end of image slider-->

with new jQuery code that you need to place in place of your old code.

<script>
jQuery(function($){
$('.slider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 1920,
slideMargin: 20,
slideMargin: 20,
auto: true,
});
});
</script>

tried and voila. It work like a charm.  Now, The turn was to implement the same in my WordPress theme so that the End-user of x-plosiv event and promotions could see the results.

#1 Generate a special custom Post type – Clients

Just copy and paste the following code inside your theme’s functions.php file and the code will automatically add a new post type client inside your WordPress admin Panel.

add_action( 'init', 'bn_clients_management' );
function bn_clients_management()
{
    $client_args = array (
                'public'    =>true,
                'query_ver' =>'client',
                'rewrite'   => array(
                                'slug'  =>  'client',
                                'with_front'    =>   false
                                ),
                'supports'  => array(
                                'title',
                                'excerpt',
                                'publicize',
                                'thumbnail'
                                ),
                'labels'    =>  array(
                            'name'              =>'Clients',
                            'singular_name'     =>'Client',
                            'add_new'           =>'Add New Client',
                            'add_new_item'      =>'Add New Client',
                            'edit_item'         =>'Edit Client',
                            'new_item'          =>'New Client',
                            'view_item'         =>'View Client',
                            'search_items'      =>'Search Clients',
                            'not_found'         =>'No Client found',
                            'not_found_in_trash'    =>'No Client Found in Trash'
                            ),
                    'menu_position' =>4,   
                    'public'              => true,
                    'show_ui'             => true,
                    'show_in_menu'        => true,
                    'show_in_nav_menus'   => true,
                    'show_in_admin_bar'   => true,
                    'can_export'          => true,
                    'has_archive'         => true,
                    'exclude_from_search' => false,
                    'publicly_queryable'  => true,
                    'capability_type'     => 'page',
                    'menu_icon' => 'dashicons-id',
                );
    register_post_type('client', $client_args );
}

 # Design a new Page template to display all the New client type posts

This step is required to show all the available custom post type post in a new Page. The next page code will generate a new Page template ‘Client Listing’ that will bring all the post in and display only four images in a column.


<?php
/*
Template Name: Clients Listing
*/
?>
<?php get_header();?>
<section id="folio">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
          <div class="services">
           <h2 class="text-center" style="background:yellow;color:black;padding:10px 0px;"><?php the_title();?></h2>
           </div>
      </div>
    </div>
  </div>
  <div style="margin-bottom:20px;"></div>
  <div class="slider">
      <?php   
          $args = array( 'post_type' => 'client', 'posts_per_page' =>-1);
          $loop = new WP_Query( $args );
          $col = 0;
          while ( $loop->have_posts() ) : $loop->the_post();  
          if($col==0){echo '<div>';}
          ?>
            <?php the_post_thumbnail('medium',array('class' =>'img-responsive'));?>
          <?php
          $col++;
          if($col%3==0){echo '</div>'; $col=0;}
          endwhile;
          ?>
     
  </div>
</section>
<?php get_footer();?>

 

The code list above is designed ass per the xplosiv theme. You are free to change the above code as per your need.

#3 check multi row image slider

In order to check the functionality of this multi row image slider, You are required to generate client post in the multiple of fours and then Publish a page where the page template must be ‘ Client Listing’.

Suggested Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>