You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
as you can see it is a full function code that show some simple slides that all contains only one img tag that load in lazy mode. if you check this page you can see images not loaded until you scroll over slides to make them loaded. but I found that if you remove dir="rtl" from HTML tag, we can not see this problem.
additionally, I found that if i reduce number of slides to 2, 3 slides, it works without any problems. so i found that dir="rtl" and number of slides more than 2,3 items cause this problem. but i want to use it in RTL documents and my slides is more that 20 slides.
i should mention that you can see this problem only with chrome browser.
Expected Behavior
i want to use it in RTL documents and my slides is more that 20 slides.
+1 I am also seeing this issue. When using RTL mode images with a loading="lazy" attribute are not being loaded until first interaction with the slider
Check that this is really a bug
Reproduction link
https://codesandbox.io/p/devbox/48cy6j?file=%2Fsrc%2Findex.html&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvdj2bak0006356iarrkb0uq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvdj2baj0002356i375wyngr%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvdj2baj0004356idbjz2asz%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvdj2baj0005356idrtbito5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvdj2baj0002356i375wyngr%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvdj2baj0001356iz7v3gs1j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvdj32ie0002356in2vkul7d%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvdj2baj0002356i375wyngr%2522%252C%2522activeTabId%2522%253A%2522clvdj32ie0002356in2vkul7d%2522%257D%252C%2522clvdj2baj0005356idrtbito5%2522%253A%257B%2522id%2522%253A%2522clvdj2baj0005356idrtbito5%2522%252C%2522activeTabId%2522%253A%2522clvdj2v5v007s356iyapo7jhq%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522port%2522%253A1234%252C%2522id%2522%253A%2522clvdj2v5v007s356iyapo7jhq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clvdj2baj0004356idbjz2asz%2522%253A%257B%2522id%2522%253A%2522clvdj2baj0004356idbjz2asz%2522%252C%2522activeTabId%2522%253A%2522clvdj2r43006o356ixyffxw0z%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvdj2baj0003356iqcez7z57%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clvdj2dt3000cdaf825jo1hqg%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522id%2522%253A%2522clvdj2r43006o356ixyffxw0z%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Bug description
as you can see it is a full function code that show some simple slides that all contains only one img tag that load in lazy mode. if you check this page you can see images not loaded until you scroll over slides to make them loaded. but I found that if you remove dir="rtl" from HTML tag, we can not see this problem.
additionally, I found that if i reduce number of slides to 2, 3 slides, it works without any problems. so i found that dir="rtl" and number of slides more than 2,3 items cause this problem. but i want to use it in RTL documents and my slides is more that 20 slides.
i should mention that you can see this problem only with chrome browser.
Expected Behavior
i want to use it in RTL documents and my slides is more that 20 slides.
Actual Behavior
images not loaded in RTL documents
Swiper version
11.1.1
Platform/Target and Browser Versions
chrome 124
Validations
Would you like to open a PR for this bug?
The text was updated successfully, but these errors were encountered: