Closed cajogit closed 3 years ago
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
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:
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
Everything is working like expected now. Thanks for the quick fix and big up for embla carousel.
Thanks @cajogit. Let me know if you run into more trouble. Iām closing this issue as resolved then.
Enjoy š!
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?