Load Next slide Image in a carousel while on current slide using lozad. (load n+1th slide while on nth slide)

[Decay24]

I'm currently using lozad in a carousel and it works fine but to improve performance I need the image of the immediate next slide in carousel to load while on current slide.

Tried changing values of root margin but it still loads image once that slide is on viewport.

---

var observer = lozad('.lozad', {
threshold: 0,
rootMargin: '600px'
})
observer.observe();

As you can see root margin with 600px is working fine vertically but not horizontally.

Images are loading vertically when they are 600px away from viewport but not horizontally in carousel.

In carousel the image is loading only when we move to next slide which will affect the performance.

Do I have to set root property as well? if so what can be the value? Because I tried giving it null, doesn't work.

how can I get the intersection observer to work on x-axis as well.

Am I missing something or Is there any way to modify root margin so that in carousel while I'm on "nth slide, n+1th slide" be loaded for smooth transition in carousel.

@ApoorvSaxena

[ivangorbunoff]

You probably need to create additional observer. The root parameter accepts an element. You need to specify an element with an overflow hidden (the parent element of the slides). However, if you are using typescript, then the root option is not declared. I think you'll have to use ts-ignore.