Continuous autoPlay scrolling - autoScroll

[slcr]

Looks awesome and quite perfect to me. The only thing i’m missing so far is some kind of ‘autoScroll’ when using the ‘freeScroll’ Option. ‘autoPlay’ is not working as expected.

( copy of comment made here: https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/#comment-1592976 )

[desandro]

Thanks for this feature request.

Add a 👍 reaction or subscribe to this issue if you would like to see this feature added. +1 comments will be deleted.

[eballeste]

+1 for a continous, ticker-style scroll

[mauricesnip]

+1 for continuous autoplay scrolling

As a separate feature perhaps? Something like continuousAutoPlay: true or autoPlaySkipCell: true. You can still swipe/navigate to cells this way.

[EugeneDae]

+1

[adam-h]

+1

[adam-h]

I just implemented this as I needed it for my project, would be great to have it upstream and may be useful to others :)

[PatrikLythell]

@adam-h thanks for this!

However I ran into a bug where the slider would skip a bit on mouseleave.

I tried fixing it inside your release but the code was a bit hard to get. Anyway, I've pinned down the root of the problem and it is the minimun return value of 10 inside proto.animate:

proto.animate = function() {
  if( this.isContinuous ) {
    var passed = +new Date() - this.lastAnimate;
    var move = Math.min( ( 1 / passed ) * Math.abs( this.freePlaySpeed ), 10 );

i fixed it as so:

proto.animate = function() {
  if( this.isContinuous ) {
    var passed = +new Date() - this.lastAnimate;
    var move = ( 1 / passed ) * Math.abs( this.freePlaySpeed );
    move = (isFinite(move)) ? move : 0;

But i'm not sure what the 10 was for originally so don't want to PR.

[adam-h]

@PatrikLythell The Math.min() was to stop it moving too much in one step (if the animation frame were delayed a significant amount it would jump along a little).

The finite check looks good. What are your thoughts on removing the Math.min() as it could be moved to after the isFinite() check or just removed.

[maxackerman]

+1 for a constant speed scrolling autoplay

[wagich]

+1 that would be really useful

[desandro]

I'm going to stick with my position and decline this feature request. The autoPlay feature is a suitable solution. Adding another type of auto-motion behavior is not worth the cost of additional complexity.

Thanks for all your feedback!

[daslicht]

Anyone found an alternative to Flickity which has this feature, please?

[stefenphelps]

@daslicht I found what you're looking for and it even has support all the way back to IE5:

<marquee></marquee>

In all seriousness, I have had clients ask for continues scroll rather than pausing. Maybe @desandro will get to it by V3.

[daslicht]

@stefenphelps

<marquee></marquee>

don't give you an infinite flow, at least I haven't found a solution , yet.

The text (or something else) would run entirely from one side to another until it disappear completely.
After that it would restart.

Try to make something like this with the marquee tag and post the result please:

http://www.davidpayr.com

[HowdyMcGee]

Would love to see this feature

[theleeno84]

Is there still no option for continuous autoPlay scrolling after clicking on the slide?

[discoliam]

If anyone needs @roberrrt-s solution in Vanilla JS, I've re-worked it slighlty. Thanks for doing the hard work though :) Might not be perfect, but working for us at least.

const carousels = document.querySelectorAll('.carousel'), 
  args = {
    accessibility: true,
    resize: true,
    wrapAround: true,
    prevNextButtons: false,
    pageDots: false,
    percentPosition: true,
    setGallerySize: true,
  };

carousels.forEach((carousel) => {
  let requestId;

  if (carousel.childNodes.length > 3) {
    const mainTicker = new Flickity(carousel, args);

    // Set initial position to be 0
    mainTicker.x = 0;

    // Start the marquee animation
    play();

    // Main function that 'plays' the marquee.
    function play() {
      mainTicker.x = mainTicker.x - 1.5;
      mainTicker.settle(mainTicker.x);
      requestId = window.requestAnimationFrame(play);
    }

    // Main function to cancel the animation.
    function pause() {
      if (requestId) {
        window.cancelAnimationFrame(requestId)
        requestId = undefined;
      }
    }

    // Pause on mouse over / focusin
    carousel.addEventListener('mouseover', pause, false);
    carousel.addEventListener('focusin', pause, false);

    // Unpause on mouse out / focusout
    carousel.addEventListener('mouseout', play, false);
    carousel.addEventListener('focusout', play, false);

  }

});

[srikat]

Do any of these solutions do "pause on hover" on the continuously scrolling carousel?

[roberrrt-s]

@srikat Mine and @discoliam does.

[srikat]

@srikat Mine and @discoliam does.

Is the pause instant or after some delay?

[cmalven]

The above posted solutions work remarkably well. The only small issue I've found is that if you use this approach with prevNextButtons or pageDots enabled, Flickity never actually updates the slide index, and gets confused by the extreme x position when you try to navigate to a new slide.

A very quick glance at the Flickity source didn't uncover anything, but anyone know if Flickity provides any method that would help manually set the slide index based on x position on every requestAnimationFrame so Flickity will jump to the closest slide when navigated?

[cmalven]

Upon some farther investigation of the Flickity source (and lots of trial and error) I was able to solve the above pretty easily. Below is my "update" code, which runs in a requestAnimationFrame:

const _updateTicker = function() {
  flickity.x = (flickity.x - tickerAmount) % flickity.slideableWidth;
  flickity.selectedIndex = flickity.dragEndRestingSelect();
  flickity.updateSelectedSlide();
  flickity.settle(flickity.x);
  window.requestAnimationFrame(_updateTicker);
};

This was tested with the following settings:

autoPlay: false,
prevNextButtons: true,
draggable: true,
wrapAround: true

[elliottmangham]

@cmalven @roberrrt-s any chance anybody can stick a working example on CodePen/jsFiddle? Would appreciate seeing a working example!

Thanks a lot

[cmalven]

@elliottmangham

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

Also includes pausing/playing of ticker when the slideshow is hovered.

[elliottmangham]

@elliottmangham

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

Also includes pausing/playing of ticker when the slideshow is hovered.

You, sir, are a legend. Thanks for sharing.

[desandro]

Re-opening for visibility.

Add a 👍 reaction to this issue if you would like to see this feature added.

[csjui]

Following @koraysels pattern, I believe I found a really nice way to apply pause/play into his solution:

Boss! Thank you

[joebentaylor1995]

Everybody wants this feature added, just add it 😂

[yepecece]

This great, thanks.

Also, do you know a way to implement a smooth pause on hover like here?
https://brand.uber.com (Best-in-class examples section)

[willslater]

Has anybody managed to get this working on React JS?

I have the scrolling working, and play/pause is hooked up. However, the issue is with window.requestAnimationFrame(update); as it re-renders the component so even when it triggers, i have a new component rendered so its ignored and simply continues.

Any guidance or a nudge in the right direction would be appreciated.

[willslater]

The reason is that I was changing isPaused with state, that was waiting for the re render to use, but the re render was causing it to reset to initial value.

I changed to using ,

const isPaused = useRef(true);

and

if (isPaused.current) return;

and now it works.

[ocripps24]

Has anyone managed to get @cmalven 's solution working with lazy loading? At present mine will only load the selected number of images defined by the lazyload option and then it fails to convert the data attribute into a src attribute for any unloading images.

[mizzyexists]

This honestly feels like an essential feature for a powerful slider like Flickity.

+1

[tlhfckoctbcr]

Must concur. I use this tool everywhere; this feature would be a gamechanger. Keep up the great work.

[eduardopalmeida]

The reason is that I was changing isPaused with state, that was waiting for the re render to use, but the re render was causing it to reset to initial value.

I changed to using ,

const isPaused = useRef(true);

and

if (isPaused.current) return;

and now it works.

Hi @willslater,

Can you explain how you managed to get "scrolling working, and play/pause is hooked up" ?
Thanks so much.

[eduardopalmeida]

Hi, anyone got this working on a React project?
Thanks

[maximilianschmitt]

If anybody is encountering jumpy movements on mobile browsers during scrolling. This is happens because the browser's viewport resizes when the mobile browser UI gets smaller/bigger, causing Flickity to resize itself.

To fix this, turn the resize option off. You might then need to programmatically tell flickity to resize itself when you deem it appropriate.

[dangelion]

They added this feature?

[darslu]

@elliottmangham

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

Also includes pausing/playing of ticker when the slideshow is hovered.

maybe have any solution for slider with img when lazyloading? Right now is terrible shaking every time image is loaded

[charlotteMARQ]

has anyone figured out how to slow the speed for this down?

[refaldodev]

If anybody is encountering jumpy movements on mobile browsers during scrolling. This is happens because the browser's viewport resizes when the mobile browser UI gets smaller/bigger, causing Flickity to resize itself.

To fix this, turn the resize option off. You might then need to programmatically tell flickity to resize itself when you deem it appropriate.

This is very good, but there is still a problem when resizing the display, it becomes distorted. Do you have a solution for this issue?