0

非常に奇妙なサイズの問題を示すスライダーに Glide.js を使用しています。

縁取りされたボックスに 1 つのスライドを表示したいと考えています。ただし、ページロード時にはサイズがオフになります。ビューポートのサイズを少し変更すると、スライダーが適切なサイズにジャンプし、問題なく動作します。

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

どんなアイデアでも歓迎します。ここでは選択肢がありません。

4

0 に答える 0