Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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;
    }
}

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5

Top GitHub Comments

16reactions

noveljacommented, Jul 22, 2020

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();
}); ```

0reactions

ezramodcommented, Sep 8, 2020

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

Top Results From Across the Web

Slick Slider Width 0 On Initial Page Load - Stack Overflow

Sometimes, on the very first page load the slide and track width are being set to 0. I've tried many of the solutions...

ResizeObserver - Web APIs | MDN

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

Resize a picture, shape, text box, or other object

You can change the size of pictures, shapes, text boxes, or other objects by either ... of the original height or width you...

Content Jumping (and How To Avoid It) | CSS-Tricks

To fix it, I used the browser's DevTools to measure the height of the resulting content and hardcoded it as a min-height for...

fancybox3 · Documentation

.fancybox-slide--iframe .fancybox-content { width : 800px; height : 600px; ... right-click and use simple image protection for images protect: false, ...