Topic: Multi Item Carousel behaviour on small devices - only shows first slide from each group
Jakub Strebeyko staff answered 7 years ago
width
parameter. That way users are not made to unexpectedly scroll sideways.
Knowing of these two above-mentioned facts - the nature of the carousel and the responsiveness principle in cards should help one to understand, why setting three sets of cards, three cards each, as carousel items on narrow devices causes only the first card of the set to be displayed. If I understand correctly, your expected behavior of a carousel's is to have it act like it had three sets of three cards on bigger screens, while on smaller ones to act as it had nine cards being passed around as its items.
With Best Regards,
Kuba serveit pro commented 7 years ago
Hi Kuba, Thanks for your response. You're right in my interpretation of how this carousel should work on small devices. If items are grouped in the carousel and it still acts as a carousel on smaller devices (ie you can swipe to the next group), it is easy for the user to miss that the items in each group are in fact stacked before they swipe right. This can be particularly important if, for example, the carousel is a list of products. If the user does not realise that each group is stacked because subsequent items after the first item in each group are stacked beneath it and out of screen view, it is easy for the user to miss them. I've implemented a separate carousel library that allows me to specify the responsive behaviour at different breakpoints. This solves my issue. I believe it's a UX question. I guess it's working as designed... I'm just not sure that's the optimal experience. Best regards, AlanJakub Strebeyko staff commented 7 years ago
Hi Alan, I totally get the reasoning. One of our main goals was to keep the carousel's maintenance as simple as possible, but this might not always be a perfect fit. Thanks for the feedback! With Best Regards, KubaFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No