Multi Item Carousel Advance - 1 item per time does not work


Topic: Multi Item Carousel Advance - 1 item per time does not work correctly on a mobile device

Luninsa pro asked 5 years ago

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/


Turner pro 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.


Marta Szymanska staff pro premium answered 5 years ago

Hi,

do you mean that multi-item carousel looks bad on small devices? That columns are not responsive on mobile?

Best, Marta


Turner pro 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 Szymanska staff pro premium 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 Szymanska staff pro premium commented 5 years ago

Hi,

you're welcome.

Best, Marta


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: 4.8.3
  • Device: all (width screen < 720px)
  • Browser: Safari/Chrome
  • OS: All
  • Provided sample code: No
  • Provided link: Yes
Tags