How can I achieve a marquee / ticker effect inside a slider?

Question

Disclaimer: I'm using the flickity-slider library to achieve the basic slideshow effect.

I have created a slideshow of various <div> elements, that all contain a picture element, a title and some content. Using the following mock up HTML structure:

 .b-slider__slides { display: flex; flex-flow: row nowrap; width: 100%; overflow: hidden; } .b-slider__slide { margin: 0 2.5rem; text-align: center; } a { color: #000; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="b-slider__slides js-main-slider"> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150" alt="Couple in car"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> </div> 

Using the flickity-slider (version 2.1.2) and jQuery, I can generate a slideshow based on this structure:

 $(document).ready(() => { const mainTicker = new Flickity('.js-main-slider', { accessibility: true, wrapAround: true, prevNextButtons: true, pageDots: false, autoPlay: true }); }); 

 @import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css'); .b-slider__slides { width: 100%; background: blue; overflow: hidden; } .b-slider__slide { margin: 0 2.5rem; text-align: center; background: red; width: 30rem; height: 20rem; } a { display: flex; flex-flow: column nowrap; background: red; color: #000; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"></script> <div class="b-slider__slides js-main-slider"> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> </div> 

My question is, how can I create a continuous marquee/ticker like effect using slides, that pause as soon as you hover over them?

Answer 1

There's been a lot of debate going on regarding this subject, the original author has chosen not to implement a functionality like this because horizontal infinite scrolling is not worth the additional complexity.

However ...

After some playing around with the above code, and working on a partial solution provided by koraysels , I came up with the following (working!) snippet:

 const mainTicker = new Flickity('.js-main-slider', { accessibility: true, resize: true, wrapAround: true, prevNextButtons: false, pageDots: false, percentPosition: true, setGallerySize: true, }); // Set initial position to be 0 mainTicker.x = 0; // Start the marquee animation play(); // Main function that 'plays' the marquee. function play() { // Set the decrement of position x mainTicker.x -= 1.5; // Settle position into the slider mainTicker.settle(mainTicker.x); // Set the requestId to the local variable requestId = window.requestAnimationFrame(play); } // Main function to cancel the animation. function pause() { if(requestId) { // Cancel the animation window.cancelAnimationFrame(requestId) // Reset the requestId for the next animation. requestId = undefined; } } // Pause on hover/focus $('.js-main-slider').on('mouseenter focusin', e => { pause(); }) // Unpause on mouse out / defocus $('.js-main-slider').on('mouseleave', e => { play(); }) 

 @import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css'); .b-slider__slides { width: 100%; background: blue; overflow: hidden; } .b-slider__slide { margin: 0 2.5rem; text-align: center; background: red; width: 30rem; height: 20rem; } a { display: flex; flex-flow: column nowrap; background: red; color: #000; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"></script> <div class="b-slider__slides js-main-slider"> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> <div class="b-slider__slide"> <a href="#" class="b-slider__ref"> <picture class="b-slider__picture"> <img src="https://via.placeholder.com/350x150"> </picture> <span class="b-slider__date">29/01/1993</span> <h3 class="b-slider__subtitle">Lorem ipsum</h3> </a> </div> </div> 

You might want to disable drag and drop if you wish to achieve a pure marquee effect, but it was entirely suitable for my use case.