Tengo problemas para agregar dos controles deslizantes diferentes en la misma página.

Cuando agrego .swiper2 a otro div de otro control deslizante, aparece una barra de desplazamiento (el control deslizante funciona pero puede arrastrar y mover todo a lo ancho). El primer control deslizante hace todo bien. A tener en cuenta todo está en la misma página (en la página de inicio). Si necesita que alguien le explique más, puedo enviarle capturas de pantalla de cómo se ve.

Ver mi código html y js:

 <div class="section__thumb__tile swiper"> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> ----CONTENT---- </div> <div class="swiper-slide"> ----CONTENT---- </div> <div class="swiper-slide"> ----CONTENT---- </div> </div> </div> <div class="wrapper swiper2"> <div class="section__fifth-cards swiper-wrapper"> <div class="section__fifth-card swiper-slide"> -----Content---- </div> <div class="section__fifth-card swiper-slide"> -----Content---- </div> <div class="section__fifth-card swiper-slide"> -----Content---- </div> </div> </div> </div> ----------------JS----------------- const swiper = new Swiper(".swiper", { // Optional parameters loop: true, spaceBetween: 50, slidesPerView: 2, freeMode: true, speed: 500, // Navigation arrows navigation: { nextEl: ".swiper-right", prevEl: ".swiper-left", }, breakpoints: { // iznad 640px 640: { slidesPerView: 2.2, centeredSlides: true, slidesPerGroup: 1, freeMode: false, }, }, }); var swiper2 = new Swiper(".swiper2", { /* Options */ loop: true, spaceBetween: 10, slidesPerView: 3, freeMode: true, speed: 500, centeredSlides: true, scrollContainer: false, wrapper: ".swiper-wrapper1", // breakpoints: { // // iznad 640px // 640: { // slidesPerView: 3, // centeredSlides: true, // slidesPerGroup: 1, // freeMode: false, // }, // }, });```