Итак, я накостылял, но кое-как работает.
- Установил свайпер
- структура свайпера
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="glide__slide">
<div class="card">
</div>
</li>
<li class="glide__slide">
<div class="glide__slide">
<div class="card">
</div>
</li>
<li class="glide__slide">
<div class="glide__slide">
<div class="card">
</div>
</li>
<li class="glide__slide">
<div class="glide__slide">
<div class="card">
</div>
</li>
</ul>
</div>
</div>
- css
.glide__slide {
/* Итак, во всех слайдерах слайды или 100% ширину имеют, или ровно
по 2/3/4/5/.. помещаются на экране.
Но нельзя боковые слайды показывать только на ~10%.
Поэтому все слайды сдвигаются влево, чтобы кусочек всегда справа был виден */
transform: translateX(2.4em);
transition: 0.1s ease-in-out;
}
.glide__slide--active {
/* увеличил и выровнял по центру центральную(активную) карточку */
transform: translateX(-2.4em) scale(1.1) !important;
}
- объявление слайдера
var gliide = new Glide('.glide', {
swipeThreshold: 60,
dragThreshold: 60,
rewind: false,
focusAt: 'center'
});
- Кхм, здесь алгоритм, я уверен, можно было сделать проще, но это работает
gliide.on("run.after", () => { //событие перелистывания
if(gliide.index == 0){
//если перелистнули на первый слайд, то
// только следующий подвигается влево, чтобы быть справа чуть-чуть видным
$('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
}
else if(gliide.index >= 1 && gliide.index < ($('.glide__slide').length/2)-1) {
//если мы на любом, кроме первого и последнего, то следующий и предыдущий двигаются
$('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
$('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
}
else if(gliide.index == ($('.glide__slide').length/2)-1) {
//если последний слайд, то двигаем предыдущий
$('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
}
});
gliide.on(['mount.after'], () => {
//при загрузке сайта и слайдера сразу двигаем следующий слайд
$('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
});
- инициализация слайдера
gliide.mount();