CODEWITHSUNDEEP
javascriptreactjsslider
Akshay K Nair
Akshay K Nair

Reputation: 1476

Keen slider continious autoplay

I want the slider to move continuously without snapping. I've enabled free mode but on autoplay slides still snap. I searched the documentations but got no help. Is there any workaround for this?

Here's the slider with autoplay and mode:"free". https://codesandbox.io/s/epic-tree-oy0fl?file=/script.js

Documentation for keen slider: https://keen-slider.io/api/#api

Upvotes: 0

Views: 5638

Answers (3)

mojtaba shahverdi
mojtaba shahverdi

Reputation: 51

I just did it in Next.js to auto play the slider:

const [sliderRef, slider] = useKeenSlider({
    loop: true,
  })

  useEffect(() => {
    const interval = setInterval(() => {
      slider?.current.next()
    }, 3000)

    return () => {
      clearInterval(interval)
    }
  }, [slider])

Upvotes: 2

EchoCrow
EchoCrow

Reputation: 33

There is now a more robust way of achieving continuous autoplay in Keen-Slider, as mentioned in this author comment.

Taken from the official example (slightly tweaked to enable dragging):

const animation = { duration: 40000, easing: (t) => t }

const slider = new KeenSlider('#my-keen-slider', {
  loop: true,
  renderMode: 'performance',
  drag: true,
  mode: 'free',
  slides: {perView: 3},
  created(s) {
    s.moveToIdx(5, true, animation)
  },
  updated(s) {
    s.moveToIdx(s.track.details.abs + 5, true, animation)
  },
  animationEnded(s) {
    s.moveToIdx(s.track.details.abs + 5, true, animation)
  },
})

Upvotes: 1

Akshay K Nair
Akshay K Nair

Reputation: 1476

The only option was to adjust the slide times and autoplay times, heres my code:
(This code is from Keen slider's Free Mode example.)
Implementation: https://codesandbox.io/s/epic-tree-oy0fl?file=/script.js

var sliderElement = document.getElementById("my-keen-slider");
var interval = 0;

function autoplay(run) {
clearInterval(interval);
interval = setInterval(function () {
  if (run && slider) {
    slider.next();
  }
}, 3000);
}

var slider = new KeenSlider(sliderElement, {
loop: true,
mode: "free",
duration: 180000,
});

slider.next();
autoplay(true);

The part I edited is duration: 180000 and interval's interval (3000). This made it LOOK LIKE its continuously scrolling. Other answers are also welcome.

Upvotes: 2

Related Questions