Let employees slide

I’m looking for a way to let employees slide. I have been reading a post on this forum from Vlad that says in june 2017 that he is adding a slide functionality to the employees, but in my site it doesn’t slide at all.

And apart from that; it gives me a second dot to slide manually while there aren’t any not visible employees left at all…

Somebody has an idea about what’s going on here?

URL: https://tinyurl.com/ycevj8gf

Hello there,

To enable auto-scrolling on the employees slide, 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
;(function($) {
  if ( $().owlCarousel ) {
    $(".widget_sydney_employees .roll-team:not(.roll-team.no-carousel)").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: true,
    }); // end owlCarousel
  } // end if
})(jQuery);
  1. Update

Ensure you clear any applied cache as it usually blocks new code addition to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Yes, this works good!

There is only 1 problem; when I have 5 employees and a really wide screen which allows me to display 5 employees as well the slider acts weird.

As can be seen in the this printscreen the second dot (for scrolling) is not needed because of all employees are displayed:

The second printscreen shows that it does scroll to the left, what isn’t necessary in this case:

Hello there,

I am sorry, not really sure that might be causing you that issue because it appears to be displaying fine on my test site.

Here is the widget setting where 5 maximum employees specified.

04%20PM

Do you have a link to your employee page to share to allow me inspecting it? If you want it to remain private, you could email me at kharisblank@gmail.com. Mention the link to this topic to help me identify its your followup from forum reply.

Regards,
Kharis

Hi Kharis,

I have -1 at number of employees, because of that it can become 6 or 7.

Links:
https://tinyurl.com/y7xhxuaj
https://tinyurl.com/ycevj8gf

Hello there,

It looks the issue only happens with full width stretched row layout. Edit the respective row where your employees widget belongs to; and try enabling either Standard or Full Width row layout.

Regards,
Kharis

Hi Kharis,

Where can I see this? I only see this when editting the widget on homepage:

Hello there,

It’s in the row settings. You can accessing it by clicking the wrench icon of the row where employees widget resides in; and choose Edit Row menu.

25%20AM

Regards,
Kharis

Great. Found it and changed it. Can try in a few days if it works; need a computer setup that is not located here. Will let you know!

Hello, thank you this is exactly what I was looking for.
Unfortunately it doesn’t seem to work on my new installation of Sidney.
Is there something to change in the code ?
It looks like owlCarousel and widget_sydney_employees are no longuer in use.
But I’m not an expert.

Yes you’re right. That selectior is no longer being used. Since we have switched to Elementor builder. Try this adjusted code:

    ;(function($) {
      if ( $().owlCarousel ) {
        $(".elementor-widget-athemes-employee-carousel .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: true,
        }); // end owlCarousel
      } // end if
    })(jQuery);  

Regards,
Kharis