Carousel doesn't start working till browser resize gets to a point where the carousel needs to resize, then works as intended.

Bug is related to

Embla wont init till resize is triggered.

• Vanilla 4.5.3
• ES6 Webpack Project

Embla Carousel version

• v4.5.3

Describe the bug

• Carousel doesn’t become interactive till a browser resize to the carousel’s width is triggered.

Code

• HTML

    <div id="c1" class="embla embla-1">
        <div class="embla__viewport">
            <div class="embla__container">
                <div class="embla__slide">
                    <div class="embla__slide__inner">
                        <img class="embla__slide__img" src="/assets/images/artist-pages/01-profile.jpg" />
                    </div>
                </div>
                <div class="embla__slide">
                    <div class="embla__slide__inner">
                        <img class="embla__slide__img" src="/assets/images/artist-pages/02-profile.jpg" />
                    </div>
                </div>
                <div class="embla__slide">
                    <div class="embla__slide__inner">
                        <img class="embla__slide__img" src="/assets/images/artist-pages/03-profile.jpg" />
                    </div>
                </div>
                <div class="embla__slide">
                    <div class="embla__slide__inner">
                        <img class="embla__slide__img" src="/assets/images/artist-pages/04-profile.jpg" />
                    </div>
                </div>
                <div class="embla__slide">
                    <div class="embla__slide__inner">
                        <img class="embla__slide__img" src="/assets/images/artist-pages/05-profile.jpg" />
                    </div>
                </div>
                <div class="embla__slide">
                    <div class="embla__slide__inner">
                        <img class="embla__slide__img" src="/assets/images/artist-pages/06-profile.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>

• JS

const mainCarouselWrap = document.getElementById("c1");
        const mainCarouselView = mainCarouselWrap.querySelector("c1 .embla__viewport");
        const mainCarousel = EmblaCarousel(mainCarouselView, {
            selectedClass: "",
            slidesToScroll: 2,
            loop: false
        });

• CSS

.embla {
            position: relative;
            background-color: #f7f7f7;
            padding: 20px;
            max-width: 670px;
            margin-left: auto;
            margin-right: auto;
        }

        .embla__viewport {
            overflow: hidden;
            width: 100%;
        }

        .embla__viewport.is-draggable {
            cursor: move;
            cursor: grab;
        }

        .embla__viewport.is-dragging {
            cursor: grabbing;
        }

        .embla__container {
            display: flex;
            user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: transparent;
            margin-left: -10px;
        }

        .embla__slide {
            position: relative;
            min-width: 50%;
            padding-left: 10px;
        }

        .embla__slide__inner {
            position: relative;
            overflow: hidden;
            height: 190px;
        }

        .embla__slide__img {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            width: auto;
            min-height: 100%;
            min-width: 100%;
            max-width: none;
            transform: translate(-50%, -50%);
        }

Video: https://youtu.be/Ff2r0oNi9hc

[DarceyLloyd]

@davidcetinkaya all good now thanks, the reInit did help prevent the setup glitch, but after applying the opacity fade, it adds a nice effect to the page to see the carousels fade (0.3s via GSAP ) 👍

Thanks again for the info 😃

Embla is my go to carousel, I’ve never been a fan of the others, and I wont touch anything jQuery. Embla is the closes way to how I would build a carousel and expect it to be init and behave. Also a 1/4 of the css the others take.

Keep up the great work.

Thanks Darcey

[davidjerleke]

@DarceyLloyd let me know how it goes. Cheers.