While testing your approach everything works fine but the two bugs that I find is that the first card is allways cut-off from the container, and the transitions are kinda weird.
Will really appreciate your feedback, and thanks in advance !
Hey, Jorge 👋 I'm pleased to read it was useful to you.
If the order of the cards is important to your project, I think you can initially shift the array so the first element becomes the second one.
Regarding the animations, did you tried using different CSS transition properties? In production I would probably try something slower. Or what do you mean by "the transitions are kinda weird"?
Finally, you would probably need both the width of the hidden card and the with of the one next to it to calculate the .inner translation. Not sure. Did you solved it yet?
Thanks a lot for your reply. So I downloaded your code and tried it and the main problem is with the static width of the cards. If you don't have a static with on every card you will see that the transitions when you go "prev" or "next" looks strange. The carousel will make the animation and right after that it will add the next element to the inner container visible pushing the others. I cam to that conclusion because I just change your cards to a variable width and have exactly the same problem with the carousel I'm trying to code.
Also, I noticed when testing your code that as soon as you load the component the first card that you see in the carousel is the number "2" card not the number "1" is this correct ?
Really hope you can give me a hand here since I find your explanation super useful but just want it to make it work with that variable width approach.
Can you develop a little bit more about "you would probably need both the width of the hidden card and the with of the one next to it to calculate the .inner translation".
Really appreciated Luis !
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Many thanks for the tutorial Luis, it was really useful. Just wondering what would be your aproach when you have cards with different widths.
I'm basically trying to do a chip group with Vue 3:
vuetifyjs.com/en/components/chip-g...
While testing your approach everything works fine but the two bugs that I find is that the first card is allways cut-off from the container, and the transitions are kinda weird.
Will really appreciate your feedback, and thanks in advance !
Hey, Jorge 👋 I'm pleased to read it was useful to you.
If the order of the cards is important to your project, I think you can initially shift the array so the first element becomes the second one.
Regarding the animations, did you tried using different CSS transition properties? In production I would probably try something slower. Or what do you mean by "the transitions are kinda weird"?
Finally, you would probably need both the width of the hidden card and the with of the one next to it to calculate the
.innertranslation. Not sure. Did you solved it yet?Thanks a lot for your reply. So I downloaded your code and tried it and the main problem is with the static width of the cards. If you don't have a static with on every card you will see that the transitions when you go "prev" or "next" looks strange. The carousel will make the animation and right after that it will add the next element to the inner container visible pushing the others. I cam to that conclusion because I just change your cards to a variable width and have exactly the same problem with the carousel I'm trying to code.
Also, I noticed when testing your code that as soon as you load the component the first card that you see in the carousel is the number "2" card not the number "1" is this correct ?
Really hope you can give me a hand here since I find your explanation super useful but just want it to make it work with that variable width approach.
Can you develop a little bit more about "you would probably need both the width of the hidden card and the with of the one next to it to calculate the .inner translation".
Really appreciated Luis !