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

Alanc free 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.


dreamboys free answered 2 years 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 2 years ago

Hi!

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

Best regards


dreamboys free answered 2 years ago


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


Krzysztof Wilk staff commented 2 years ago

Hi!

I'm afraid it is not fixed yet.

Best regards


Alanc free 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 Wierzbicka staff commented 2 years ago

Hi,

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

Best, Marta


dreamboys free commented 2 years ago

Hi Marta, Did you make any progress fixing this?


Marta Wierzbicka staff 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



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: 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