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
     * https://github.com/Sam152/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]);}
    row.equalHeight();}}
    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;_this.data('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(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

    ;(function($) {

       'use strict'

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

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

       });
        
       
    })(jQuery);  
  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;
    }

Regards,
Kharis

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

Regards,
Chau

Hello Chau,

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

Regards,
Kharis

Good morning Kharis,

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

Thank you
Chau

Hello Chau,

By default it should display 3 visible items on the viewport as seen on our demo: https://demo.athemes.com/sydney/.

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

Regards,
Kharis