У меня есть ползунок Swiper в модале Bootstrap 4, который отображается при нажатии кнопки.
Индекс текущего ползунка, полученный с помощью realIndex, остается тем же для первогодва слайда, когда отображается модал и слайд изменяется на 1, и затем он увеличивается должным образом при дальнейшем изменении слайдов.Вот скрипка, показывающая проблему - https://jsfiddle.net/vinravun/2z6agh4x/
Что я здесь не так делаю?Какое событие Swiper я должен прослушивать и как правильно его инициализировать с включенным свойством «loop» ползунка?
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
slidesPerView: 1,
speed: 500,
centeredSlides: true,
observer: true,
observeParents: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var currentIndex,
slidesCount;
$('#myModal').on('shown.bs.modal', function (e) {
currentIndex = swiper.realIndex + 1;
slidesCount = swiper.slides.length - 2;
updateCounter();
});
swiper.on('transitionEnd', function() {
currentIndex = swiper.realIndex + 1;
updateCounter();
});
function updateCounter() {
$('.current-slide').html(currentIndex);
$('.total-slides').html(slidesCount);
}