Glide picture carousel stretching issue while loading

Question

I'm using Glide.js on a website built with Blazor to create a picture carousel. The carousel is working fine, but I have a stretching issue the first few milliseconds.

Here's an example how the carousel looks like after few miliseconds:

Here's an example of the issue while loading:

Here's my razor code:

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
        @foreach (var picture in _carouselPictures)
       {
           <li class="glide__slide"><img class="carouselPicture" alt="Exemple de maquillage" src=@picture/></li>
       }
    </ul>
  </div>
  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  </div>
</div>

Here's my js code:

window.InitGlidePictureCarousel = () => {
    const config = {
        type: 'carousel',
        autoplay: 2000,
        hoverpause: false,
        gap: 0,
        animationDuration: 3000,
        perView: 12,
        breakpoints: {
            3250: {
                perView: 11
            },
            3000: {
                perView: 10
            },
            2750: {
                perView: 9
            },
            2500: {
                perView: 8
            },
            2250: {
                perView: 7
            },
            2000: {
                perView: 6
            },
            1750: {
                perView: 5
            },
            1500: {
                perView: 4
            },
            1250: {
                perView: 3
            },
            1000: {
                perView: 2
            },
            500: {
                perView: 1
            }
        }
    };

    new Glide('.glide', config).mount();
}

I'm not really used to the front-end, do you have any solutions for this problem?