Swiper slider，如何减小滚动条的宽度

Question

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!

Answer 1

dragSize - Size of scrollbar draggable element in px.

No API option to control the width of swiper-scrollbar (The wrapper). If you change this by custom CSS you destroy the way the scrollbar works.

/* will not work as it should */
.swiper-horizontal .swiper-scrollbar{
  width: 50%!important;
}

You should open Github Feature Req related to this idea: https://github.com/nolimits4web/swiper/issues