More than 3 employees in the row

Hi,

How can I show more than 3 employees in the row on the front page?

http://recon.site/

Hello there,

Thank you for getting in touch here.

In order to achieve that objective, could you please try to do the following steps?

  1. Open the js/main.js in your code editor, then copy the whole content of it; then paste it into js/main.min.js. So it will be more readable
  2. Find the following code block:

var teamCarousel = function(){
	if ( $().owlCarousel ) {
		$(".panel-grid-cell .roll-team").owlCarousel({
			navigation : false,
			pagination: true,
			responsive: true,
			items: 3,
			itemsDesktopSmall: [1400,3],
			itemsTablet:[970,2],
			itemsTabletSmall: [600,1],
			itemsMobile: [360,1],
			touchDrag: true,
			mouseDrag: true,
			autoHeight: false,
			autoPlay: false,
		}); // end owlCarousel
	} // end if
};

  1. Change the items option value into 4 or any number that you want, and also adjust this line itemsDesktopSmall: [1400,3]. So it will look like:

var teamCarousel = function(){
	if ( $().owlCarousel ) {
		$(".panel-grid-cell .roll-team").owlCarousel({
			navigation : false,
			pagination: true,
			responsive: true,
			items: 4,
			itemsDesktopSmall: [1400,4],
			itemsTablet:[970,2],
			itemsTabletSmall: [600,1],
			itemsMobile: [360,1],
			touchDrag: true,
			mouseDrag: true,
			autoHeight: false,
			autoPlay: false,
		}); // end owlCarousel
	} // end if
};

  1. You might want to minify this JS file here

  2. Save changes. Then update through FTP or cPanel

As you are editing the core theme’s file, you should take it at your own risk. The modifications you’ve made will be lost once the theme gets updated in the future. So you should do this adjustment again.

Regards,
Kharis

thanks; is the file supposed to be in: public_html/wp-admin/js

hmm … changed the one in
public_html/wp-content/themes/sydney/js
no effect …

Hello there,

Try to clear your browser’s cache or try on other browsers.

Regards,
Kharis

No … not working
http://recon.site/
I can see that the change is made in the main.js …

Hello there,

It must be in the main.min.js file. Please carefully read the step 1 once again.

Regards,
Kharis

Ahh … sorry for being obtuse!

Success! Case closed.

Super support. Will be recommending Sydney to everyone.

Great!

Thank you for recommending. That’s extremely mean for us.

Regards,
Kharis

Hi Kharis,

How can I display 6 employees in three rows and how can I remove the Employee slider in Sydney theme.

Plese help me to fix this.

Thanks & Regards,
Kavya

Hello Kevya,

One of our users asked about this in a few months ago on this thread. I’ve provided the working solution on there. I hope you can find it useful.

Regards,
Kharis

Hi Kharis,

It worked. Thank you so much.

Regards,
Kavya.

Hi Kharis,

I have another issue in the Sydney theme, I wrote my issue in #784841. Can you please solve my issue.

Thanks in advance.

Regards,
Kavya.

Looking back at the original poster’s website, it looks like they still only have 3 of the 4 employees displayed. Mine is a similar site (azfilmandmedia.org) in that I have 4 board members whom I would like to show side-by-side when viewing on desktop.

I tried your solution in the teamCarousel function of js/main-min.js, but nothing happened. I have Sydney version 1.35 and Sydney Toolbox 1.01. Does that solution still apply?

Cancel that last question. After waiting a half hour or more, the 4-employee mode took effect. You ROCK, Kharis!

Great! You’ve figured it out.

Please let us know a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

I guess a better alternative would be to to copy main.js to child theme in js folder and use the following code:


/**
 * Removes main.min.js from parent theme and uses from child instead 
 * Was used in order to change teamCarousel.items (Employee tiles) from 3 to 4
 */
add_action( 'wp_enqueue_scripts', 'wpshout_dequeue_and_then_enqueue', 100 );
function wpshout_dequeue_and_then_enqueue() {
    
    // Dequeue (disable) parent theme script
    wp_dequeue_script( 'sydney-main' );
    
    // Deregister (remove) parent theme script. Without this the next enqueue
    // would use parent theme script instead of child's
    wp_deregister_script( 'sydney-main' );
    
    // Enqueue (add) child theme script
    wp_enqueue_script(
        'sydney-main',
        get_stylesheet_directory_uri() . '/js/main.js',
        array( 'jquery' )
    );
}

Changing the parent theme may be dangerous for future updates.

Is there a way to add 5 employees in one row whitout rewrite the .js?
Because when there is an update this rewriting will be gone.

B.r.

Hello there,

To override the default OwlCarousel configuration, please do these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

  if ( $().owlCarousel ) {
  	$(".roll-team:not(.roll-team.no-carousel)").owlCarousel({
  		navigation : false,
  		pagination: true,
  		responsive: true,
  		items: 5, /* Display 5 items */
  		itemsDesktopSmall: [1400,5], /* Display 5 items */
  		itemsTablet:[970,2],
  		itemsTabletSmall: [600,1],
  		itemsMobile: [360,1],
  		touchDrag: true,
  		mouseDrag: true,
  		autoHeight: false,
  		autoPlay: false,
  	}); // end owlCarousel
  } // end if

})(jQuery);

  1. Update

Regards,
Kharis

1 Like

o wauw, i didn’t get a notice. But thank you so much for your quick reply!