Swiper滑块，如何减小滚动条的宽度答案

【问题标题】：Swiper slider, how to reduce the width of the scrollbarSwiper滑块，如何减小滚动条的宽度
【发布时间】：2021-12-30 07:51:00
【问题描述】：

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>

现在我已经全角滚动了，但是我需要把它缩小到300px并放在中心，因为我发现滑块要缩小，但是随着滚动的宽度，出现了问题。

非常感谢您！

【问题讨论】：

标签： javascript html css slider swiper

【解决方案1】：

dragSize - 滚动条可拖动元素的大小，单位为 px。

没有 API 选项来控制swiper-scrollbar（包装器）的宽度。如果您通过自定义 CSS 进行更改，您破坏滚动条的工作方式。

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

你应该打开与这个想法相关的 Github Feature Req： https://github.com/nolimits4web/swiper/issues

【讨论】：

感谢您的提示