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

Posted 2023-05-08

【中文标题】Swiper滑块，如何减小滚动条的宽度

【英文标题】：Swiper slider, how to reduce the width of the scrollbar

【发布时间】：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"  />
            </div>
        </div>
        <div class="projects__swiper-slide swiper-slide">
            <div class="projects__swiper-img">
                <img src="images/projects/slide-2.jpg"  />
            </div>
        </div>
        <div class="projects__swiper-slide swiper-slide">
            <div class="projects__swiper-img">
                <img src="images/projects/slide-3.jpg"  />
            </div>
        </div>
        <div class="projects__swiper-slide swiper-slide">
            <div class="projects__swiper-img">
                <img src="images/projects/slide-4.jpg"  />
            </div>
        </div>
    </div>
</div>

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

非常感谢您！

【参考方案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

【讨论】：

感谢您的提示