Multi Item Carousel behaviour on small devices - only shows


Topic: Multi Item Carousel behaviour on small devices - only shows first slide from each group

serveit pro asked 7 years ago

The Multi-Item Carousel, when viewed on smaller devices, only shows the first item from each group. This behaviour can be seen on your demo page here: https://mdbootstrap.com/javascript/carousel/ A similar question was asked here: https://mdbootstrap.com/support/multi-item-carousel-only-shows-first-card-od-a-slide-on-mobile/ The answer given which was to remove "d-none d-md-block" from the items is not a satisfactory answer as all that does is make the 3 items stack for each group of 3 slides on small devices - which is not the behavior I would expect. Using MDB Pro 4.4.3 Thanks

Jakub Strebeyko staff answered 7 years ago

Hello there serveit, To provide easy implementation with maximum of functional capacity, the material carousels in our demos toggle between three items. The media applied within is ensured to be served with appropriate responsiveness, meaning it gets correctly displayed on any kind of screen, no matter their medium i.e. picture, video, panel. In case of pictures & video it means they scale down and up, covering destined surfaces evenly. One may decide to use cards as medium passed around by the carouse - even sets of thereof, that's fine. It's worth to note, though, that the responsiveness means different behavior for different UI elements and in cards it limits the number of them being displayed side-by-side horizontally and moves consecutive ones line down when scaling down the view port's 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, Alan

Jakub 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, Kuba

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No