Как инициализировать swiper для всех слайдеров с динамическим именем из external script.js
Я использую swiper с barba.js. Имена классов динамически задаются через переменные. Слайдер инициализируется из внешнего script.js. Первый слайдер хорошо инициализируется, но остальные не отвечают. Как заставить скрипт инициализировать все ползунки на странице?
function swiper(){
var id = $('#inid').html();
var smal = "smallSwiper";
var smallSwiper = smal+id;
var big = "bigSwiper";
var bigSwiper = big+id;
var smallSwiper = new Swiper('#swiper-small-'+id, {
loop: false,
direction: 'vertical',
spaceBetween: 20,
slidesPerView: 2,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var bigSwiper = new Swiper('#swiper-big-'+id, {
thumbs: {
swiper: smallSwiper
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
bigSwiper.on('slideChange', function () {
let item = $('#big-'+id + (bigSwiper.activeIndex + 1));
let target = $(item.attr('data-target'));
let title = item.attr('data-title');
let desc = item.attr('data-desc');
target.find('h2').html(title);
target.find('.modx').html(desc);
target.next('.section-footer').find('.btn').attr('data-title', title);
});});
Если вы вставляете код в тело, то все работает, но при следующем переходе это не работает. Поэтому мне нужно заставить его как-то работать из внешнего script.js