Как правильно добавить миниатюры к слайдеру, если я использую виртуальную функцию для основного слайдера? ⇐ Javascript

[Гость]

Я принимаю список файлов из django в функцию виртуальных слайдов в слайдере swiper, работает хорошо, но есть необходимость выводить слайдер с миниатюрами. Если отображать миниатюры с помощью встроенной функции свайпа, миниатюры не соответствуют отображению основного слайдера. Есть ли хорошее решение с помощью простых средств, чтобы миниатюры работали?

var js_file_list = JSON.parse(document.getElementById('js_file_list').textContent); вар слайды = []; вар слайдыThumbs = []; for (let i = 0; i < js_file_list.length; i++) { пусть файл = js_file_list; пусть имя файла = file.toLowerCase(); если (filename.endsWith('.mp4')) { слайды.push(''); SlidesThumbs.push(''); } if (filename.endsWith('.jpg') || filename.endsWith('.jpeg') || filename.endsWith('.png')) { слайды.push(''); SlidesThumbs.push(''); } } новый Swiper('.swiper-container', { слайдыPerView: 1, навигация: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, GrabCursor: правда, клавиатура: { включено: правда, pageUpDown: правда, }, колесико мыши: { чувствительность: 1, eventTarget: ".file-slider", }, watchOverflow: правда, centeredSlides: правда, виртуальный: { слайды: слайды, }, большие пальцы: { свайп: { el: '.file-mini-slider', виртуальный: { слайды: слайдыThumbs, }, свободный режим: правда, watchSlidesVisibility: правда, watchSlidesProgress: правда, }, }, }); Пыталась сделать отдельный слайдер для миниатюр, а потом связать его с основным, но тогда прокрутка обоих слайдеров работает некорректно