Set up autoplay for Lory? Help needed

[Teun87]

Hi, I'm trying to set up an autoplay function for Lory, but I'm a bit stuck. Is there a way to get the total number of slides out of the lory-object? At the moment I'm getting a wrong number since I'm trying to fetch the number through the DOM...

Also, I still need to figure out a check when the user clicks/hovers over (now the autoplay-function keeps on triggering).

Please help :)

What I've coded this far:

let index = lory(slider).returnIndex();
let totalSlides = document.querySelector('.js_slides').childElementCount;

setInterval(function(e){
    //console.log(index);
    if(index < totalSlides){
        lory(slider).slideTo((index += 2));
    } else {
        lory(slider).reset();
        index = 0;
    }
}, 2000);

Thanks, Teun

[nstanard]

I don't have time right now to finish this example and give you all the details. But first thing I would mention is to avoid setTimeout and setInterval and instead use RAF.

http://codepen.io/nstanard/pen/kkvXao?editors=1010

I have provided a link to a stack overflow post explaining RAF and how to throttle it to get what you want. I then called the lory JS API method next() to have it go to the next one. This will only work well for when infinite is set to true.

Also note - the slider will reset to the first slide on window resize and the dot index will be incorrect because there is no resize event setup right now to reset the dots as well. This should get you started though.

[Teun87]

So quick! Thanks for your great help. Teun

[Teun87]

I've got it set up in my project, but there are a few errors left:

• When the first after.lory.slide event is triggered the active-class for a bullet skips the second one. It probably has something to do with 0- and 1-based arrays.
• Same category as the previous point: the last bullet never gets the active-class and when it continues playing the 1st slide is set as 2nd bullet (with active class).
• I've set up a slider with multiple slides (avatars) visible at the same time (6 to be precise). This causes problems in the bullet navigation. Normally I would change the options-object and set 'infinite' to '6' but this isn't fixing the problem.

Can you adjust your example in a way that the above bugs are fixed?

Also it would be great to see an working example with a pause function when hovering over the slider.

Regards, Teun

[nstanard]

I am working right now and don't have much time to finish the example with pause functionality. However, I suggest you fork the example and try to solve that part yourself!

The issues you mentioned can be solved with some simple math. http://codepen.io/nstanard/pen/yaKxzK?editors=0010

[Teun87]

I've got it almost working, even on mobile with touch events. Though, on IOS the resizing of the window/extra navbar on the bottom (moving up and down on the page) is causing the slider to go back to the second slide, no matter at which slide the slider was. Any idea how to fix this? I've tried to put a touchstart-move-end eventlistener on the document, but so far I can't solve the problem with this.

Thanks for your help! Teun

[jackbarham]

An autoplay version would be awesome - I'm struggling to get it working. Pause on hover would also be nice to have, but autoplay would be great :)

[nstanard]

@jackbarham I've provided an example with autoplay. What are you having trouble with? Do you have a link?

[nstanard]

There are a lot of examples on the demo site currently and I will probably be adding more in the future. I'm closing this for now but an autoplay example will find it's way to the demo page eventually.

[ghost]

@nstanard Hi! It would still be great if you added this feature or example 👍

[karimiDev]

hi @nstanard I use

how can I autoplay slider? I saw your example, but grapesjs-lory-slider is different

[marco910]

I also tried to add autoplay to my lory slider and this code works very well in my case (without dots):

const frontpage_slider = document.querySelector(".front-page__hero__slider");

if (frontpage_slider) {
  const lorySlider = lory(frontpage_slider, {
    infinite: 1,
    ease: "ease-in-out",
    slideSpeed: 300,
    enableMouseEvents: true,
  });

  setInterval(() => lorySlider.next(), 2000);
}