Topic: Multi Item Carousel Advance - 1 item per time does not work correctly on a mobile device
Expected behavior When scrolling elements should not overlap each other.
Actual behavior The screen width is not more than 700 pixels when a single element is displayed in the slider. At the time of scrolling superimposed elements on each other.
Resources (screenshots, code snippets etc.) "Multi Item Carousel Advance - 1 item per time" on page https://mdbootstrap.com/docs/jquery/javascript/carousel/
Hi,
do you mean that multi-item carousel looks bad on small devices? That columns are not responsive on mobile?
Best, Marta
Turner premium commented 5 years ago
Yes it does look bad. Difficult to capturer as it happens quite quickly but it is noticeable to my user who do not like the effect. When the carousel advances one item, momentarily the new carousel lineup is superimposed over the old carousel lineup and then the old lineup fades away. I am not sure if this intended but I cannot figure out how to stop it happening. Certainly a clean movement of the carousel, one item at a time without any fading/superimposing effects would be great.
Marta Wierzbicka staff commented 5 years ago
Hi,
look at this snippet: https://mdbootstrap.com/snippets/jquery/marta-szymanska/911355?view=project#html-tab-view. I created a quick fix for you for the carousel. It is working on mobile devices. We will fix this in our package as soon as possible.
Best, Marta
Luninsa pro commented 5 years ago
Marta, Thank you so much! And we will wait for updates!
Marta Wierzbicka staff commented 5 years ago
Hi,
you're welcome.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.3
- Device: all (width screen < 720px)
- Browser: Safari/Chrome
- OS: All
- Provided sample code: No
- Provided link: Yes
Turner premium commented 5 years ago
I am getting exactly the same behaviour for wider screens as well. I am using the code from the same example.