En primer lugar, las respuestas que encontré en este foro no resolvieron mi problema.

Estoy usando Swiper 8.0.7 .

Cuando uso las clases a continuación, solo se inicializa la que tiene la clase "slider-main__body" . Si usa un "swiper" clase común que ambos incluyen, ambos se inicializan; sin embargo, cuando uso controles (flechas y paginación) en el segundo control deslizante, las imágenes del primero se mueven. Encontré algunas sugerencias útiles, pero ninguna funcionó. Apreciaré su ayuda.

 function initSliders() { if (document.querySelector('.slider-main__body')) { new Swiper('.slider-main__body', { modules: [Navigation, Pagination], observer: true, observeParents: true, slidesPerView: 1, spaceBetween: 32, autoHeight: true, speed: 800, loop: true, loopAdditionalSlides: 5, preloadImages: false, parallax: true, pagination: { el: '.controls-slider-main__dotts.swiper-pagination', clickable: true, }, navigation: { prevEl: '.swiper-arrow.swiper-arrow-prev', nextEl: '.swiper-arrow.swiper-arrow-next', }, }); } if (document.querySelector('.slider-rooms__body')) { new Swiper('.slider-rooms__body', { modules: [Navigation, Pagination], observer: true, observeParents: true, slidesPerView: auto, spaceBetween: 24, autoHeight: true, speed: 800, loop: true, loopAdditionalSlides: 5, preloadImages: false, parallax: true, pagination: { el: '#swiper-pagination', clickable: true, }, navigation: { prevEl: '#swiper-arrow-prev', nextEl: '#swiper-arrow-next', }, }); } } window.addEventListener("load", function (e) { initSliders(); });