Я использую Glide.js и мне это очень нравится, хотя у меня проблемы с ползунком на мобильных устройствах. Все, что меньше 800 пикселей в ширину и ширина рассчитывается неправильно. Я использую трюк с отступами для изображений, которые действуют как слайды. Все, что больше ширины области просмотра 800px и слайды рассчитываются правильно, как только я получаю меньше 800px, он рассчитывает ширину слайдов по максимальной ширине карты, а не по соотношению сторон и по настройкам вида. У меня нет настроек точки останова или CSS, которые влияют на слайды в 800px.
<li class="glide__slide">
<a href="/link"><div class="">
<img src="/path/">
</div>
</a>
</li>
&__slide {
a {
display: block;
position: relative;
}
&--image {
position: relative;
overflow: hidden;
&:before {
display: block;
content: "";
width: 100%;
padding-top: (3 / 2) * 100%;
}
> img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
transition: $transition__alt;
}
}}}