Glitch in Multi Item Carousel Advance - 1 item per time


Topic: Glitch in Multi Item Carousel Advance - 1 item per time

Alanc asked 2 years ago

The Multi Item Carousel Advance - 1 item per time contains a bug by default where the carousel items are duplicated with a slight offset and transition together. When slowing down the transition time you can see this bug occuring in more detail:

.carousel-item {
    transition: -webkit-transform 9s ease-in-out;
    transition: transform 9s ease-in-out;
    transition: transform 9s ease-in-out,-webkit-transform 9s ease-in-out;}

It is very obvious on carousel items containing only text, but even the preview on the MDB site using cards has this visual glitch.

enter image description here Page where this behavior can be seen: https://nivid.me/index2.php

A solution for this issue would be appreciated.


Marta Szymanska staff pro premium answered 2 years ago

Hi,

thank you for noticing this problem. We will try to fix this as soon as possible and we will inform you when the solution is ready. We apologize for the problems.

Best, Marta


Alanc answered 2 years ago

Hello, I was wondering if there has been any progress in fixing this issue? I may have to resort to third party pure-CSS or other JS-based carousels until there is a fix.


Marta Szymanska staff pro premium commented 2 years ago

Hi,

for now, we haven't addressed this problem yet.

Best, Marta


dreamboys commented a year ago

Hi Marta, Did you make any progress fixing this?


dreamboys answered a year ago

Is there any update on this? I am having the same problem.


Krzysztof Wilk staff commented a year ago

Hi!

I'm afraid it is not fixed yet.

Best regards


dreamboys answered a year ago

A work around is this -

For you Laravel 5 users you can detect the devices view and remove slide from mobile. Create a ServiceProvier - and then use View::share() - which will then make the device-detecting $agent available inside all of your views. With slide removed the mobile carousel works fine and desktop was okay anyway.

Steps:

Install Agent composer require jenssegers/agent

Create the service provider php artisan make:provider AgentServiceProvider

In config/app.php App\Providers\AgentServiceProvider::class,

in app/providers/AgentServiceProvider.php

Then inside your views:

    @if ($agent->isDesktop())
        <div id="carousel-name" class="carousel slide carousel-multi-item v-2" data-ride="carousel">
    @else
        <div id="carousel-name" class="carousel carousel-multi-item v-2" data-ride="carousel">
    @endif

Krzysztof Wilk staff commented a year ago

Hi!

Thanks for sharing your solution with us! I think it'll be very helpful for other people :)

Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.13.0
  • Device: Laptop
  • Browser: Brave
  • OS: Win 10 Pro Build 1903
  • Provided sample code: No
  • Provided link: Yes