Change Employees appearance

Hi everyone,
Right now, as you can see on my page, there are 10 members. I just want 3 of them each time and the visitor can click to the button to scroll to 3 other

Like this pict but just 3 people per time, not 10 one time.
Can you help me with that, thank you!

Hello there,

To accomplish it, try doing the below 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
     * Javascript-Equal-Height-Responsive-Rows
    (function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
    heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
    return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;'grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
    $(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind('grids-event-namespace'));return this;};})(window.jQuery);

    ;(function($) {

       'use strict'

       $(window).on('load resize', function() {
         if( $('.roll-team').length ){

            $('.roll-team .owl-item').responsiveEqualHeightGrid();

  1. Update
  2. Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .roll-team .owl-wrapper{
      max-width: 100% !important;
      transition: none !important;
      transform: none !important;

    .roll-team .owl-controls{
      display: none !important;


Thank you Kharis, but it still doesn’t work. Maybe you misunderstand me. I hope 3 people would be displayed and visitor can click the button to move to another 3 and click and move to another 3. Now there are 10 of them displayed together but I hope just 3 of them are displayed!

Thank you for your patience and I am very glad to have your support


Hello Chau,

Please check your employee widget’s setting. And ensure the option that reads “Center the employees?” is unchecked.


Good morning Kharis,

I checked it already, but it haven’t changed yet!
Do you know why?

Thank you

Hello Chau,

By default it should display 3 visible items on the viewport as seen on our demo:

Did you make some code changes? What will happen if you re-install the fresh one of Sydney theme?