Multi Item Carousel Advance - 1 item per time weird effect


Topic: Multi Item Carousel Advance - 1 item per time weird effect

Upside30 asked 3 years ago

Expected behavior

For the animation to be smooth without issuehttps://mdbootstrap.com/docs/jquery/javascript/carousel/

Actual behavior

It distorts and blurs all of my text and images for some reasonhttps://gyazo.com/146ed2eb0fda81b8cbbea3b015033678

Resources (screenshots, code snippets etc.)

JS - // Material Select Initialization $(document).ready(function () { $('.mdb-select').material_select(); $('.carousel.carousel-multi-item.v-2 .carousel-item').each(function () { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this));

            for (var i = 0; i < 3; i++) {
                next = next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));

            }
        });

    });

Mateusz Łubianka staff commented 3 years ago

@Upside30,

Do you have this issue only in your project/specific browser? I checked it and on MDB site it works good.

Best,


Upside30 commented 3 years ago

It seems the blur appears on all browsers I’m deploying my project too. The one on the mdbootstrap site works correctly without blur however my project causes the carousel to blur as in the gyazo video


Mateusz Łubianka staff commented 3 years ago

Hi,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.11.0
  • Device: web
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes