Topic: Glitch in Multi Item Carousel Advance - 1 item per time
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.
Page where this behavior can be seen: https://nivid.me/index2.php
A solution for this issue would be appreciated.
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
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 5 years ago
Hi,
for now, we haven't addressed this problem yet.
Best, Marta
dreamboys commented 4 years ago
Hi Marta, Did you make any progress fixing this?
Is there any update on this? I am having the same problem.
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 4 years ago
Hi!
Thanks for sharing your solution with us! I think it'll be very helpful for other people :)
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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