Никак не выходит сделать чтобы смена слайдов была плавной и сами слайды были правильной формы.
Есть блок по центру этого блока должен располагаться активный слайд. А не активные слайды должны в виде кружочков сбоку
Вот примерная схема такая.
Я на событие transitionEnd добавил класс неактивным слайдам
$(_swiper).find('.swiper-slide:not(.swiper-slide-active)').addClass('swiper-slide-noactive');
а на событии transitionStart снимаю его с активного
Сделал кружки из неактивных
.swiper-slide.swiper-slide-noactive{
width: 15rem !important;
border-radius: 50%;
border: 1px solid #f0f0f0;
height: 15rem;
margin-left:
}
Но в итоге получается, что каждый слайд расчитывается (его ширина) и сдвиг идет на целый слайд, а он никак не 100px, а примерно 500px.
Пришла идея на transitionEnd так же заменить сдвиг
$('.swiper-product .swiper-wrapper').css({'transform':'translate3d(-'+25*countBeforeActive+'rem, 0px, 0px)'});
стало выглядеть похоже, но он теперь дергается из-за того что изначально сдвиг идет почти на 500px? f потом возвращается на величину 25rem
Помогите, как правильно это сделать, не понимаю, а еще фильтры нужно будет прикрутить чтобы сменять картинки слайдера
