XF 2.3 How to configure carousel speed?

[Kirby]

Lightslider had an option to control the sliding speed, unless I am missing smth. it doesn't seem like this is still possible with Fancyapps Carousel?

 

[Jeremy P]

Do you mean the interval between slides?

Autoplay Plugin | Carousel from Fancyapps UI

Robust JavaScript UI Component Library

fancyapps.com

Otherwise my understanding is the actual animation uses Panzoom:

Options | Panzoom from Fancyapps UI

Robust JavaScript UI Component Library

fancyapps.com

 

[Kirby]

Do you mean the interval between slides?

No, I was referring to the animation speed, eg. how long it takes for one animation to complete.
Configuring the interval / delay / pause between two animations was easy.

I've already tried Panzoom option friction / decelFriction but that doesn't seem to have any effect.

 

[Jeremy P]

The docs specifically call out decelFriction, but I haven’t tested myself:

Options | Carousel from Fancyapps UI

Robust JavaScript UI Component Library

fancyapps.com

 

[Kirby]

I've tried that as well at https://jsfiddle.net/fo2z54nc/, but it doesn't seem to have any effect (or I just don't notice any).

 

[Kirby]

As it's not really documented anywhere (or I missed it) it took quite a bit of stepping into the JavaScript code, but I think I found what I was looking for:
CSS variable --f-transition-duration

 

[webtiryaki]

As it's not really documented anywhere (or I missed it) it took quite a bit of stepping into the JavaScript code, but I think I found what I was looking for:
CSS variable --f-transition-duration

Hi, maybe it could be useful for you?

<script>
let slideIndex = 0;
showSlides();
 
function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; 
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}   
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, {{ property('setTimeout') }}); // Change image every 2 seconds
}
</script>

 

[Kirby]

I am not entirely sure what your code is supposed to do, but Fancyapps Carousel has no elements with class dot (by default).

As I already posted, adjusting the interval / delay / bause between two slides is easy as it is documented (option Autoplay.timeout).
Changing the actual animation duration ("sliding speed") was not documented, but also isn't difficult - it just requires changing CSS varriable --f-transition-duration

 

[🔥Iggy🔥]

I am not entirely sure what your code is supposed to do, but Fancyapps Carousel has no elements with class dot (by default).

As I already posted, adjusting the interval / delay / bause between two slides is easy as it is documented (option Autoplay.timeout).
Changing the actual animation duration ("sliding speed") was not documented, but also isn't difficult - it just requires changing CSS varriable --f-transition-duration

how do you actually do this?

i tried one simple test like:

[data-widget-key="xfmg_slider"] {
  --xfmg-slidesPerPage: 6;
  --f-transition-duration: 1000ms;
}

which doesnt error in the console, but also doesnt effect the speed.....with 2.3 it seems a bit jerky, we had a slow crawl on there somehow, id like to get that back.

 

[🔥Iggy🔥]

its strange anyway because if you put --f-transition-duration in console, it prompts color options?
ive tried --f-carousel-transition-duration as well and found that root code it has other f-carousel codes but i cant seem to effect the speed