Swiper滑块swiper-button-prev按钮功能异常，与swiper-button-next行为一致问题求助

Hey there, I’ve dealt with this exact Swiper button issue before, so let’s break down what’s probably happening and how to fix it quickly!

The Likely Root Cause #

Looking at your HTML, you’ve applied identical styling to both .swiper-button-prev and .swiper-button-next:

<div class="swiper-button-prev" style="margin-left: auto; margin-right: auto;width: 85%;" ...></div>
<div class="swiper-button-next" style="margin-left: auto; margin-right: auto; width: 85%;" ...></div>

Setting width: 85% and centering both buttons with auto margins means they’re overlapping completely. When you click what looks like the left arrow, you’re actually tapping the next button (or vice versa) because their clickable areas are stacked on top of each other. That’s why both buttons trigger the same slide direction!

Step-by-Step Fixes #

1. First, Reset Button Styling

Remove those inline styles to restore Swiper’s default button positioning, then test if the arrows work as expected:

<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>

If this fixes the behavior, you can reposition the buttons properly using CSS (avoid full-width unless you intentionally want that):

.swiper-button-prev {
  left: 2rem; /* Adjust to match your site's design */
  right: auto;
}
.swiper-button-next {
  right: 2rem; /* Adjust to match your site's design */
  left: auto;
}

2. Avoid Selector Conflicts (If Needed)

If you have multiple Swiper instances on your site, generic classes like .swiper-button-prev can cause event binding conflicts. Give your testimonial slider buttons unique classes:

<div class="testimonial-prev swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
<div class="testimonial-next swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>

Then update your Swiper config to target these unique classes:

var testimonialSlider = new Swiper('.testimonial-slider-three', {
    // ... your existing config
    navigation: {
        nextEl: '.testimonial-next',
        prevEl: '.testimonial-prev',
    },
    // ... rest of your config
})

3. Check for Direction/Loop Oddities

• Double-check you haven’t accidentally set direction: 'rtl' in your Swiper config (this reverses slide directions entirely).
• Temporarily disable loop: true to rule out any loop-related visual glitches, then re-enable it once the button behavior is fixed.

Final Notes #

Nine times out of ten, overlapping buttons from misapplied styling are the culprit here. Start with resetting the styles, then tweak the positioning to fit your site’s design without breaking functionality.

内容的提问来源于stack exchange，提问作者Filip Ćurić