我们将 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
欢迎任何想法,我们在这里真的没有选择。