Ticker-Style Continuous Flickity Slider

See – https://codepen.io/cmalven/pen/vqbJPM.

// speed of ticker
let tickerSpeed = 1;
let flickity = null;
let isPaused = false;
const slideshowEl = document.querySelector('.target-div');

// functions
const update = () => {
     if (isPaused) return;
     if (flickity.slides) {
          flickity.x = (flickity.x - tickerSpeed) % flickity.slideableWidth;
          flickity.selectedIndex = flickity.dragEndRestingSelect();
          flickity.updateSelectedSlide();
          flickity.settle(flickity.x);
     }
     window.requestAnimationFrame(update);
};

const pause = () => {
     isPaused = true;
};

const play = () => {
     if (isPaused) {
          isPaused = false;
          window.requestAnimationFrame(update);
     }
};

// create flickity instance
flickity = new Flickity(slideshowEl, {
     cellAlign: 'left',
     setGallerySize: true,
     dragThreshold: 25,
     pageDots: false,
     prevNextButtons: false,
     autoPlay: false,
     draggable: true,
     wrapAround: true,
     selectedAttraction: 0.015,
     friction: 0.25
});
flickity.x = 0;

// event listeners
slideshowEl.addEventListener('mouseenter', pause, false);
slideshowEl.addEventListener('focusin', pause, false);
slideshowEl.addEventListener('mouseleave', play, false);
slideshowEl.addEventListener('focusout', play, false);

flickity.on('dragStart', () => {
     isPaused = true;
});

// start ticker
update();