Slider delay set to below the amount of duration breaks slider

[AlexN (Alex Nichol)]

I think this is a bug unless I’m miss-interpreting what timer delay for the slider does.

If you set the timer delay to something below the duration of the slide then the slider freaks out.

In my example I’m trying to get images to scroll across the screen in a infinite loop. The first slider works almost perfectly. Though there are issues with how the first slide blinks in.

The second slider is exactly the same the only difference is that the timer delay is set to zero.

If that’s not that way to set the slider to simply start scrolling immediately then what is?

http://frame-interactions.webflow.io/slider-bug

[samliew (webflowexpert.com)]

@AlexN

The second slider is exactly the same the only difference is that the timer delay is set to zero.

No, the duration is also set to 1/10th of a second, which is why it is spasming.

[AlexN (Alex Nichol)]

Oops must have been testing something and forgot to set it back.

The published version. Has the first slider with a duration and timer delay set to 15000ms

The second slider has a duration of 15000ms and a timer delay of 0ms.

[samliew (webflowexpert.com)]

Well I can see what you are doing here. Unfortunately, the slider auto-animate will stop as soon as the user clicks or taps on them. So, even if this is fixed, you might still want to implement another custom slider library.

  if (isAttrTrue(data.el.attr('data-autoplay'))) {
    config.autoplay = true;
    config.delay = parseInt(data.el.attr('data-delay'), 10) || 2000;
    config.timerMax = parseInt(data.el.attr('data-autoplay-limit'), 10);
    // Disable timer on first touch or mouse down
    var touchEvents = 'mousedown' + namespace + ' touchstart' + namespace;
    if (!designer) {
      data.el.off(touchEvents).one(touchEvents, function() {
        stopTimer(data);
      });
    }
  }

[samliew (webflowexpert.com)]

This is the delay setting, if it is 0, set it to 2000ms!

config.delay = parseInt(data.el.attr('data-delay'), 10) || 2000;

Bug is basically a hard-coded fallback value of 2000, if it is 0.

Workaround is to set delay to 1.

To fix this code, perhaps the delay fallback could be set to duration setting?

config.delay = parseInt(data.el.attr('data-delay'), 10) || config.duration;

---

Supplementary information:

Here is the code that tries to make the slider autoscroll infinitely:

This code runs the slider next function, which runs the change function:

  window.setTimeout(function() {
    if (data.timerId == null || designer) return;
    next(data)();
    startTimer(data);
  }, config.delay); // <- Here delay setting is used

Inside the slider change function:

  var slideRule = 'transform ' + duration + 'ms ' + easing;

  ...

  // Slide - infinite scroll
  if (config.infinite && shift.x) {
    tram(data.slides.not(prevTargs))
      .set({ visibility: '', x: shift.x })
      .add(slideRule)
      .start({ x: offsetX });
    tram(prevTargs)
      .set({ visibility: '', x: shift.from })
      .add(slideRule)
      .start({ x: shift.to });
    data.shifted = prevTargs;

  }