如何调整Swiper滑块滚动条宽度并将滑块容器设为300px居中

Hey there! Let's tackle this scrollbar width problem you're facing after resizing your Swiper container to 300px and centering it. Here's a step-by-step solution tailored to your code:

1. First, Correctly Style Your Swiper Container #

Start by adding CSS to set the container width and center it—this ensures Swiper has the right base dimensions to calculate scrollbar and slide sizes:

.projects__swiper-start {
  width: 300px;
  margin: 0 auto; /* Centers the container horizontally */
  position: relative; /* Ensures scrollbar is positioned correctly relative to the container */
}

2. Fix the Swiper Configuration Typo #

I noticed a small typo in your JS code: watchOverFlow should be watchOverflow (capitalization matters here). Fixing this helps Swiper properly handle overflow states, which can indirectly affect scrollbar behavior:

document.addEventListener('DOMContentLoaded', function() {
  const projectsSwiper = new Swiper(".projects__swiper-start", { 
    speed: 1000, 
    slidesPerView: 3, 
    navigation: { 
      nextEl: ".projects__swiper-next", 
      prevEl: ".projects__swiper-prev", 
    }, 
    watchOverflow: true, // Corrected typo here
    simulateTouch: true, 
    spaceBetween: 19, 
    scrollbar: { 
      el: ".projects__swiper-scroll", 
      draggable: true, 
      dragSize: 80, 
    }, 
  });
});

Wrapping the initialization in DOMContentLoaded also ensures Swiper calculates sizes after the DOM is fully loaded, preventing layout-related bugs.

3. Force Scrollbar to Match Container Width #

Swiper sometimes inherits unexpected styles for the scrollbar container. Add this CSS to make sure the scrollbar spans the full width of your 300px container:

.projects__swiper-scroll {
  width: 100% !important; /* Overrides any default calculated width */
  left: 0 !important; /* Aligns scrollbar to the left edge of the container */
  bottom: 10px; /* Adjust this value to position the scrollbar vertically as needed */
}

4. Verify Slide Dimensions (Optional) #

If you still see odd behavior, double-check that your slides are sized correctly. With slidesPerView: 3 and spaceBetween: 19, each slide's width should automatically calculate to (300 - 19*2)/3 ≈ 87.33px. If slides are overflowing, you can explicitly set slide width in CSS:

.projects__swiper-slide {
  width: calc((300px - 38px)/3) !important; /* 38px = 19px * 2 (space between 3 slides) */
}

These steps should resolve the scrollbar width issue while keeping your 300px centered layout intact. Let me know if you run into any other quirks!

内容的提问来源于stack exchange，提问作者Alexander Menshikov