JavaScript

 const projectsSwiper = new Swiper(".projects__swiper-start", { speed: 1000, slidesPerView: 3, navigation: { nextEl: ".projects__swiper-next", prevEl: ".projects__swiper-prev", }, watchOverFlow: true, simulateTouch: true, spaceBetween: 19, scrollbar: { el: ".projects__swiper-scroll", draggable: true, dragSize: 80, }, });

HTML

 <div class="projects__swiper-start swiper"> <div class="projects__swiper swiper-wrapper"> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-1.jpg" alt="slide-1" /> </div> </div> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-2.jpg" alt="slide-2" /> </div> </div> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-3.jpg" alt="slide-3" /> </div> </div> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-4.jpg" alt="slide-4" /> </div> </div> </div> </div>

Ahora me he desplazado en todo el ancho, pero necesito reducirlo a 300 px y colocarlo en el centro, ya que encontré el control deslizante para reducir, pero con el ancho del desplazamiento, hay un problema.

¡Muchas gracias por adelantado!