javascript - 页面加载时的 Glide.js 滑块大小偏移

Question

我们将 Glide.js 用于显示一些非常奇怪的尺寸问题的滑块。

我们想在有边框的框中显示一张幻灯片。但是，在页面加载时，大小已关闭。一旦视口大小发生微小变化，滑块就会跳到正确的大小并完美地工作。

HTML：

<div  class="widget-inner col-xl-6 widget-prop-xl-3-1 col-lg-6 widget-prop-lg-3-1 col-md-6 widget-prop-md-3-1 col-sm-12 widget-prop-sm-3-1 col-12 widget-prop-3-1">
    <div class="two-col-glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                {% for block in section.blocks%}
                <li class="glide__slide">
                    <a href="{{block.settings.product.url}}">
                        <div style="text-align: center;">
                            <div v-for="(property, index) in propertyGroups.properties" v-if="property.id == 59"
                                class="ae__empfehlung">
                                {% render 'aerycs-recommendation'%}
                            </div>
                            <img src="{{block.settings.product.featured_image| img_url: '340x'}}"
                                style="margin-top: 50px;margin-bottom:50px">
                            <div class="thumb-content">
                                <a class="thumb-title small stretched-link">{{block.settings.product.title}}</a>
                                <div class="ae__property"><span>{{block.settings.property}}</span></div>
                                <hr class="thumb-hr">
                                <div class="thumb-meta mt-2">
                                    <div class="prices">
                                        <div class="price">ab {{block.settings.product.price | money_with_currency}}
                                            * </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i
                    class="bi bi-chevron-double-left"></i></button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i
                    class="bi bi-chevron-double-right"></i></button>
        </div>
    </div>
</div>

这是JS：

    new Glide('.two-col-glide', {
    type: 'slider',
    startAt: 0,
    perView: 1,
    gap: 0,
    peek: {
        before: 0,
        after: 0
    }
}).mount()

滑动得越多，偏移量就越高。

幻灯片 1：https ://i.stack.imgur.com/xK0rp.png

幻灯片 2：https ://i.stack.imgur.com/vebkTa.png

You can see the example URL here: https://aerycs.myshopify.com/?_ab=0&_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaGxoWlhKNVkzTXViWGx6YUc5d2FXWjVMbU52YlFZNkJrVlUiLCJleHAiOiIyMDIxLTA4LTMxVDIwOjExOjM0LjQ1MFoiLCJwdXIiOiJwZXJtYW5lbnRfcGFzc3dvcmRfYnlwYXNzIn19--4a599a7f9099c7e3e2250a01b9f10c9f7e7f9593&_fd=0&_sc=1&key=7c9d0a103dd4ee80db5e935fd6f246259cfecc8b6d93fbc8c7008dcef16efc08

欢迎任何想法，我们在这里真的没有选择。

标签： javascriptcssglidejs