Infinite scroll calls api on every slide change

[cajogit]

Hey all,

I wanted to implement infinite scroll with the carousel and followed the example. With 2 slides in view and dragFree on false it calls the api on every slide change.

I made a codesandbox to demonstrate the issue. Check the slides array updating on top of the carousel.

https://codesandbox.io/s/embla-carousel-infinite-scroll-react-forked-9q01d

How can i solve this?

[davidjerleke]

Hi @cajogit,

Thank you for your question. I think the strange behavior is caused by the incorrect use of slidesToScroll option in combination with your slide widths. Here's an explanation on how slidesToScroll works.

If you want to display 2 slides in view with each slide 50% wide, change this in your CSS:

.embla__slide {
  position: relative;
  min-width: 100%; /* Change this to 50% */
  padding-left: 10px;
}

If not, I would appreciate some more information about what you want to achieve.

I've modified your 👉 CodeSandbox. Let me know if it helps.

Kindly, David

[cajogit]

Thanks for your quick answer.

.embla__slide {
  position: relative;
  min-width: 100%; /* Change this to 50% */
  padding-left: 10px;
} 

I had this already in my orginal code. My bad for providing wrong informations.

I have two components inside embla__slide__inner. An image and under it i have a div with text. So im not setting a height on embla__slide__inner but this two components are setting it and everything is working great. Just this strange behavior is coming up.

Codesandbox to reproduce the strange behavior:

https://codesandbox.io/s/9q01d

[davidjerleke]

Hi again @cajogit,

There was a bug in the Infinite Scroll example so you need to update the code to the latest. I only fixed the bug on the VanillaJS example and forgot to update the React example. Thanks for letting me know.

Just copy paste the code from the useInfiniteScroll.js file in this CodeSandbox to yours and it should work.

Let me know if it helps.

Best, David

[cajogit]

Everything is working like expected now. Thanks for the quick fix and big up for embla carousel.

[davidjerleke]

Thanks @cajogit. Let me know if you run into more trouble. I’m closing this issue as resolved then.

Enjoy 🙂!