Employee Slider Parameter

Hi folks,
I wonder if there’s any way to define the parameters for the employee widget carousel? E.g. slider speed, slider pause before advancing, number of displayed employees … maybe even transition method?
Cheers, Timo

Dear Timo,

Thank you for asking. Unfortunately we don’t have yet any option to easily manage those via customizer. However you could override the main JS script which handles it with this jQuery code:

;(function($) {

  $(window).on('load', function () {
    if ( $().owlCarousel ) {
			$(".roll-team:not(.roll-team.no-carousel)").not('.roll-team.type-b').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: $(".roll-team").data('autoplay')
			}); // end owlCarousel
		} // end if
  });

})(jQuery);

To apply extra JS code to your site, you can use the TC Custom JavaScript plugin.

To play around with possibilities you could do with Owl Carousel parameters, refer to its documentation.

Regards,
Kharis

Hi Kharis,
thanks very much for the code. For some unknown reason the code has no effect on the carousel. I added the code into your recommended PlugIn as well as in the Custom CSS & JS PlugIn … changed some significant parameters as “slideSpeed: 20,” … or “items: 2,” to see some difference … tried to include it into the JQuery Frame … but nothing changed the behaviour ot the slider :frowning: - What might I have done wrong?
Cheers, Timo

PS Website is http://mvz.tim-o.com

Is there possibly something that would prevent the code from beeing executed?
Cheers, Timo

Hello there,

Very sorry for the long delay. Please try this code:

;(function($) {

   'use strict'

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

})(jQuery);  

I got this from archived support found in this thread. This one is better and should be working.

Regards,
Kharis

Hi Kharis,
thanks again! This code is working perfect in some of the areas. I still could not solve an essential part: the delay and scrolling speed. I looked up the documentation of the owl.carousel.js API. and found quite some parameters related to speed. Even though I added step by step all of them (the documentation is not to extensive and leaves quite some questions) - none of them changed any speed in any way :frowning:
Parameters I tried:

    autoPlayTimeout: 5000,
    autoplaySpeed: 5000, 
    slideSpeed: 10000,
    smartSpeed: 2000,

Changed the parameters of all of them in th JS code … but none had an effect. It works fine with other parameters like e,g,

    Items: 3,
    navigation : true,
    pagination: true,
    responsive: true,

Are there special requirements or positions for the speed parameters? Or didn’t I take the right parameter?
I’m aware this is a carousel issue, but maybe you have some easy explanation at hand.

Thanks in advance for your excellent support! Very much appreciated! Buying you full package seems more than justified seeing the effort you spend in after sales and customer care!
Cheers, Timo

Hello there,

Try these parameters:

    slideSpeed : 200,
    paginationSpeed : 800,
    rewindSpeed : 1000,

Refer to js/owl.carousel.js in the sydney-pro-ii theme folder.

Regards,
Kharis

Hmm, pagination and rewind speed works … but for some reason the slideSpeed parameter has no effect :frowning: Any ideas?

I looked at the carousel.js code provided with SydneyPro-II and it seems autoPlaySpeed and autoPlayTimeout parameters are not supported as described in the original API?!

Hello there,

Try replicating the below code which works as expected to me.

;(function($) {

  'use strict'

  if ( $().owlCarousel ) {
  $(".roll-team:not(.roll-team.no-carousel)").not('.roll-team.type-b').owlCarousel({
    navigation : false,
    pagination: true,
    responsive: true,
    items: 5,
    itemsDesktopSmall: [1400,5],
    itemsTablet:[970,2],
    itemsTabletSmall: [600,1],
    itemsMobile: [360,1],
    touchDrag: true,
    mouseDrag: true,
    autoHeight: false,
    autoPlay: $(".roll-team").data('autoplay'),
    slideSpeed : 7000,
    paginationSpeed : 2000,
    rewindSpeed : 6000,
  }); // end owlCarousel

  } // end if

})(jQuery);

Regards,
Kharis

Hi Kharis,
thanks again for your help. I copied the code as you send it. paginationSpeed and rewindSpeed work as expected but slideSpeed has no effect. It can be 100 or 10000 i can’t see any speedchange at all :frowning:

Aside that, the OWLCarousel API offers the “loop” option (instead of rewinding the slides - I’d love to set my carousel into that mode) … But that parameter also does not seem to be supported by the OWLCarousel.js file you provide with the SydneyPro II Theme? (or is there another option to loop the caroussel?) … Same with the “margin” (distance between the slides) parameter? (Just trying to understand since I found these setting in the original API) …

Thanks again for your support!
Cheers, Timo

I played around with some OWLCarousel parameters at this demo page:

Slide speed here has no effect as well but the “autoplayTimeout: 200,” parameter does what I want. Sadly this parameter does not seem to be supported as well in your version of the OWLCarousel.js. Also the loop parameter works as expected on the above mentioned demo page. (Just FYI)

Hello there,

As we went to this phase of talk, I felt we should update the Owl Carousel script in order to get best possible features. I’ll add it to the list of update queue. Hopefully our developer could see its fit.

Regards,
Kharis

So, if I understand you correctly the slideSpeed parameter does not work in your JS version as well and you are looking into improving the script to get this and possibly other parameters to work? (Not criticizing, just for my understanding)

Thanks for your answer,
Cheers, Timo

Yes, it doesn’t seem to work. The reason of it remains unknown until we investigate it deeply.

Regards,
Kharis

OK, thanks for the information! Would be nice if you could keep me updated once the problem is adressed/solved.
Cheers, Timo