New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[React][Carousel] Next / Prev triggers not respecting slidesPerView with loop #1447
Comments
What is the behaviour you expect to see? |
@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. |
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: