Adding Carousel Slideshow in Agentpress Listings Widget

Adding Carousel Slideshow in Agentpress Listing Widgets
Adding Carousel Slideshow in Agentpress Listing Widgets

Last day Lisa encourage me to do this. So I am showing you how to add the Bxslider carousel slideshow in Agentpress Listings Widget.

First uploading the BxSlider’s js, css and image files in “agentpress-pro” folder.

  1. Download the attached file. Now extract it on your local machine.
  2. Connect with your server via FTP or File Manager
  3. Upload jquery.bxslider.css file in “agentpress-pro” folder
  4. Upload images files in “agentpress-pro/images” folder
  5. Upload jquery.bxslider.min.js and jquery.easing.1.3.js files in “agentpress-pro/js” folder

Enqueuing the CSS and JS files on Home Page. Login to Dashboard and navigate to Appearance > Editor page. Open the front-page.php file. Add following code inside the “agentpress_front_page_enqueue_scripts()” function and save the changes . Or you can download the file via FTP and edit the file on Notepad+.

global $wp_widget_factory;
  
  if ( is_active_widget( false, false, $wp_widget_factory->widgets[AgentPress_Featured_Listings_Widget]->id_base, true ) ) {
    wp_enqueue_style( 'bxslider-css', get_bloginfo( 'stylesheet_directory' ) . '/jquery.bxslider.css' );
    wp_enqueue_script( 'bxslider-js', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.bxslider.min.js', array(), '1.0.0' );
    wp_enqueue_script( 'easing-js', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.easing.1.3.js', array(), '1.0.0' );
    wp_enqueue_script( 'listings-slider', get_bloginfo( 'stylesheet_directory' ) . '/js/listings-slider.js', array(), '1.0.0' );
  }

There have a if statement if ( is_active_widget( false, false, $wp_widget_factory->widgets[AgentPress_Featured_Listings_Widget]->id_base, true ) ) which is checking that Agentpress Listing Widget is activated or not. Files will enqueue if Agentpress Listing Widget is activated.

Creating a new js file “listings-slider.js” and uploading the file in agentpress-pro/js folder

Add the following code in this file:

jQuery(document).ready(function($) {
  $(".featured-listings > .widget-wrap").bxSlider({
    easing: 'swing',
    slideSelector: 'div.listing',
    auto: true,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: 410,
    slideMargin: 20,
    speed: 1300,
    pager: false
  });
});

Last editing the style.css file

/* Go to line number 1382 and add this */
.full-width .featured-listings .bx-wrapper .listing{
  margin: 0;
  width: auto;
}

/* Go to line number 1409 and add this */
.full-width .featured-listings .bx-wrapper .listing:nth-of-type(3n+1){
  clear: none;
}

/* Go to line number 2515 and add this */
.full-width .featured-listings .bx-wrapper .listing{
    margin: 0;
    width: auto;
  }

/* Go to line number 2542 and add this */
.full-width .featured-listings .bx-wrapper .listing:nth-of-type(2n+1),
.full-width .featured-listings .bx-wrapper .listing:nth-of-type(3n+1){
    clear: none;
    margin: 0;
  }

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

4 Discussion to This Post

  1. Hi, I followed all your steps, but when you have to modify the style.css file I had previously had problems since added other lines of code, so I do not match the numbers of rows to edit and which will not change.

  2. Thanks again for this tutorial – it’s looking and working great! I’m wondering if there’s an easy way to add one or two rows to each slide, so multiple listings are visible at once (grid style, 3 rows with 3 listings per row – 9 listings total)? Thank you!

  3. Oh my goodness – I noticed your link to my site just now! I remember posing this question in the Genesis forum back in Feb. and then didn’t have to deal with a solution until now. I was just searching for a tutorial on how to do this and yours was the first to pop up. Thank you SO much! I’ll let you know how it goes. 🙂

Leave A Reply

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