Closed AhmedAbdulrahman closed 2 years ago
Hi @AhmedAbdulrahman,
Thank you for the CodeSandbox. Unfortunately, I couldn't reproduce the problem. But this might be happening because you're animating the slides when they're scrolled into view. Now that's not a problem per se, but if you do it while Embla Carousel is mounting and reading the slide rects (in order to calculate the scroll positions), the slide positions will be altered while the slides are animating.
Could you try initialising Embla before you animate the slides?
Best, David
I think I am able only to reInit
the slider here:
export function carousels() {
emblaCarousels.forEach((emblaCarousel) => {
const emblaNodes = querySelectorAllToArray(emblaCarousel.container)
if (emblaNodes.length > 0) {
emblaNodes.forEach((emblaNode) => {
const embla = createEmblaCarousel(emblaNode, emblaCarousel)
console.log('here', embla)
embla.reInit({
align: 'start',
containScroll: 'trimSnaps',
slidesToScroll: 2,
skipSnaps: false,
dragFree: true,
})
})
}
})
}
That animation is a custom lib called aos
. Do you have any suggestion where to reInit it? also I notice that sometimes I get this wired behavior when I scrolled to that section and then refresh a few times, and when you land on page then scroll it works and sometimes does not work!
@davidjerleke
@AhmedAbdulrahman since you're only animating once, I don't think you need to reInit
the carousels at all. I guess you could just move the aos
library init function below the carousel init function like so:
carousels() // <-- init carousels first
AOS.init({ // <-- run AOS after
once: true,
duration: 1200,
})
@AhmedAbdulrahman please let me know when you’ve had the chance to try my suggestion and if it solves the problem.
Bug is related to
Embla Carousel version
Describe the bug
CodeSandbox
Steps to reproduce
products-list__main
slider in index.html,brand-campaign.html
https://user-images.githubusercontent.com/10485129/167104136-cebb74df-8c86-46a1-b94c-4b64b4aea315.mp4
Expected behavior
translate3d
to0,0,0
Additional context