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

[pstinnett]

@desandro hopefully it's OK to post this here...

I stumbled across this site which seems to be using Flickity combined with what I assume is some custom code to achieve the continuous marquee effect. I haven't spent much time looking to reverse engineer but I thought it might be useful to post incase someone else wants to take a look.

Checkout the Instagram section here:

https://www.mendo.nl/about/flagship-store/

[r00dY]

Hey guys,

I took a look into source code of flickity and found pretty simple solution. It's not thoroughly tested etc, just a quick idea and example. Implementing this in current project, will see how it behaves.

    var previousDate; // if undefined, animation is paused

    function step() {
        if (typeof previousDate == 'undefined') { return; }

        var date = new Date();
        var diff = (date - previousDate) / 20; // in this case 20 is "speed constant", the higher value, the slower movement
        previousDate = date;

        /* key 2 lines of code */
        flkty.x -= diff;
        flkty.positionSlider();

        requestAnimationFrame(step);
    }

    function play() {
        if (typeof previousDate == 'undefined') {
            previousDate = new Date();
        }

        requestAnimationFrame(step);
    }

    function pause() {
        previousDate = undefined;
    }

    play();

Initially I planned to call play/pause on dragStart / dragEnd events, but somehow flickity works nice without it. But it might be worth considering if something went wrong.

[bennyjien]

@r00dY Thank you for this! It works quite nice, but on iOS scrolling the page will cause the current slider position to reset.

[antoniofelizardo]

@r00dY @bennyjien Would you please share any more info on how you've implemented your code? Currently toying around with Flickity and wondering if there is indeed a chance of turning it into a continuous scrolling slideshow. Thanks in advance

[TomDeSmet]

To bad this won't be implemented. I think Flickity is probably the best slider out there, but I realy need this for a webapp. It seems a logical feature request and autoPlay does not offer a solution as it is now. Other sliders (such as Slick) offer a combination of settings with which you can achieve every effect:

speed: 2500,
autoplay: true,
autoplaySpeed: 0,

Unfortunately, the responsiveness of Flickity is far better than most.

[koraysels]

I needed this behaviour for my site too and i found @pstinnett example on that mendo.com website. I looked a bit in the source code and it is failry easily done in fact... here's the mimimum required code to do it (without pause on hover etc... you need to implement that yourself or if I ever get to it i will post it here.):

init() {
    this.flkty = new Flickity('<someDOMElement>', {
          prevNextButtons: false, 
          pageDots: false,
          wrapAround: true,
          freeScroll: true
     });
    this.flkty.x = 0;
    this.loop();
}

loop() {
    this.flkty.x--;
    this.flkty.integratePhysics();
    this.flkty.settle( this.flkty.x);
    window.requestAnimationFrame(this.loop.bind(this));
}

[pveen2]

@koraysels Did you already implemented it? I can't get it working.

[richardwiggins]

@r00dY @bennyjien I'm also try to get something like this working but unsure how to implement this code suggestion. It's not playing ball for me.

[roberrrt-s]

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

// For every container, do the following:
_$container.each((i, el) => {
	// Set a unique animation request id variable
	let requestId;

	// Check if the slider contains more than 3 slides
	if($(el).children().length > 3) {
		// Initialize the slider
		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 = 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
		$(el).on('mouseenter focusin', e => {
			pause();
		})

		// Unpause on mouse out / defocus
		$(el).on('mouseleave', e => {
			play();
		})
	}
})

[jshrssll]

@roberrrt-s nice solution dude! Thanks for sharing 👍

[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?