My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides.
The approach I am considering involves stacking multiple card-decks and smoothly transitioning to the next one when an arrow is clicked. Essentially, only one card-deck will be visible at a time, but I want them to align side by side for seamless CSS transitions.
Currently, my code looks like this:
<row>
<card-deck>
<card/> x 3
</card-deck>
<card-deck>
<card/> x 3
</card-deck>
<card-deck>
<card/> x 3
</card-deck>
</row>
However, this arrangement stacks the card decks vertically due to the full width of each card-deck (utilizing the flex option in Bootstrap 4). How can I make them 100% wide while still stacking horizontally, allowing me to hide overflow and scroll through the decks?
I have experimented with various solutions but haven't found the right approach yet. Here's a fiddle link to see the current setup:
If you are aware of an updated alpha 4 bootstrap CDN with flex capabilities, please let me know as the one I am using may be outdated.