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
Hi again, I hope it's not the case with v 3 docs this time :)
It seems like carousel Triggers are not respecting slidePerView prop while loop is true.
For example for loop={true} slidesPerView={3} and 9 items, first 2 clicks on Next btn moves all three items and then you have to click Next btn 7 times (without any effect) and it goes back to currentIndex=0.
But it seems to work fine with loop={false} when Prev and Next are disabled on the edges, you can make only 2 moves.
@PsammystPrime at the moment, when I got 9 slides, 3 slides per view and loop, I have to click Next button 9 times to get back to begging, where slides changes only at first 2 click, then next 6 does nothing visible and last one goes back to start.
Which possibly looks fine when you got only 1 slide per view.
So expected behawior for 9 slides and 3 slides per view is to make loop with 3 clicks, instead of 9 (number of slides)
Create a function that takes in a variable X which is the number of buttons (say 9 for this case). Then create another variable for Y ( that creates number of slides) which will be dependent on X hence if buttons are 3, it should should deliver 9slides and if buttons are 9 it should provide 27slides. Ratio is 1:3.
Description
Hi again, I hope it's not the case with v 3 docs this time :)
It seems like carousel Triggers are not respecting slidePerView prop while loop is true.
For example for
loop={true} slidesPerView={3}
and 9 items, first 2 clicks on Next btn moves all three items and then you have to click Next btn 7 times (without any effect) and it goes back tocurrentIndex=0
.But it seems to work fine with
loop={false}
when Prev and Next are disabled on the edges, you can make only 2 moves.Link to Reproduction (or Detailed Explanation)
https://codesandbox.io/p/devbox/pensive-fire-tg3fym?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%2522clucexmtu0007356nkj1iuukz%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%2522clucexmtu0002356nk3mxrnfy%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%2522clucexmtu0004356nvb62qz4f%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%2522clucexmtu0006356nsji5jtaw%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clucexmtu0002356nk3mxrnfy%2522%253A%257B%2522id%2522%253A%2522clucexmtu0002356nk3mxrnfy%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clucf14zf0035356ic9kejsel%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A21%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A21%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clucf14zf0035356ic9kejsel%2522%257D%252C%2522clucexmtu0006356nsji5jtaw%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clucexmtu0005356nqyvhvcbm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clucexmtu0006356nsji5jtaw%2522%252C%2522activeTabId%2522%253A%2522clucexmtu0005356nqyvhvcbm%2522%257D%252C%2522clucexmtu0004356nvb62qz4f%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clucexmtu0003356nqowtpflj%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clucexmtu0004356nvb62qz4f%2522%252C%2522activeTabId%2522%253A%2522clucexmtu0003356nqowtpflj%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Steps to Reproduce
Just use last carousel example from docs.
Ark UI Version
2.2.3
Framework
Browser
Google Chrome
Additional Information
No response
The text was updated successfully, but these errors were encountered: