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();

About Matt Whiteley

Matt has been building bespoke WordPress websites for over 10 years specializing in the Genesis Framework. He integrates Advanced Custom Fields heavily in all builds, especially with the new Gutenberg Block Editor, allowing clients to easily modify all aspects of the their website with ease.

He works with a wide variety of small businesses and agencies across the country providing development services as well as hosting and maintenance. When he isn't coding he enjoys spending time with his wife and two children, golfing and playing poker.