Glide: Initial Slide Width Is Wrong - Triggering A Resize Results In Correct Width

[rhysstubbs]

When I mount the slider the initial width of all the slides is incorrect, thus, making all slides incorrectly positioned when navigating forward/backwards.

The issue is resolved after a window resize event but the initial width is continuously incorrected. Because it fixes itself on resize I am ruling out my CSS is causing the issue.

I am using the following HTML markup:

<div class="glide property-glide">
        <div data-glide-el="track" class="glide__track">
            <ul class="glide__slides">
                <li class="glide__slide" data-indexable>
                    <a href="/images/example.com" data-toggle-popup>
                        <div class="bg" data-src="example.com/images/2.jpg"></div>
                    </a>
                </li>
            </ul>
            <div class="glide__controls">
                <button class="glide__control glide__control--previous"></button>
                <button class="glide__control glide__control--next"></button>
            </div>
            <div class="glide__pagination">
                <i class="icon-camera"></i>
                <span class="glide__pagination--value"></span>
            </div>
        </div>
    </div>

With the following CSS (SCSS):

.glide {
    display: flex;
    flex: 1;
    position: relative;
    height: 100%;
}

.glide__slides, .glide__track {
    height: 100%;
    margin-bottom: 0;
}

.glide__pagination {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(33, 33, 33, 0.5);
    padding: 5px 8px;
    color: #ffffff;
}

.glide__slide {
    .bg {
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }
}

.glide__controls {
    @include fill-absolute();
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.glide__control {
    display: inline-flex;
    width: 7rem;
    background: transparent
        url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3LjQ5MnB4IiBoZWlnaHQ9IjEyLjkzNXB4IiB2aWV3Qm94PSIwIDAgNy40OTIgMTIuOTM1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3LjQ5MiAxMi45MzUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNS42NTQsMTIuOTM0IDAsNi42NDEgNi4wMDksMCA3LjQ5MiwxLjM0MiAyLjY5MSw2LjY0NSA3LjE0MiwxMS41OTggIi8+PC9zdmc+")
        no-repeat center center;
        background-size: 1.8rem;
    filter: drop-shadow(1px 1px 2px #666);
    pointer-events: all;

    &.glide__control--next {
        transform: rotate(180deg);
    }

    &:hover,
    &:focus,
    &:active {
        background-color: transparent;
    }
}

[pedrogualandi]

Had the same problem here @rhysstubbs,

Inputing values in _vw_ instead of the % on the _.glide__slides_ and _.glide__slide_ classes in the _glide.core.css_ worked for me.

[novelja]

Had the same problem and initializing Glide after window load event worked for me:

javascript window.addEventListener('load', function () { new Glide('.glide', { startAt: 0, perView: 4 }).mount(); });

[shanejones]

Can confirm that the code @novelja provided fixed the issues for me.

[albanyacademy]

i noted this here...
https://github.com/glidejs/glide/issues/508#issuecomment-687353604

the issue is that glidejs doesn't look at css properties, styles or anything, it looks at the rendered dimensions of the elements. so calling it while the page is still painting will fuck it up - and this includes dynamic elements that have css transitions/animations, you need to wait for the element to be done whatever it is that its doing before you mount().

[ezramod]

Had the same problem and initializing Glide after window load event worked for me:

window.addEventListener('load', function () {
  new Glide('.glide', {
    startAt: 0,
    perView: 4
  }).mount();
}); ```

and me i can confirm this but now responsive slider not work:

perViewLg:2,
perViewSm:1