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>

Now I have scrolled in full width, but I need to reduce it to 300px and place it in the center, as I found the slider to reduce, but with the width of the scroll, there is a problem.

Thank you very much in advance!