Pagination dots (last/first) fail with loop, slidesPerView: 'auto'

[antoniooo12]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/github/antoniooo12/swiper-slide-per-group/main

Bug description

Describe the bug

When using Swiper React with slidesPerView: 'auto', loop: true, dynamic slidesPerGroup, and clickable pagination, two issues arise related to the pagination dots, especially when the last slide is only partially visible initially:

1. Tapping the last pagination dot does not make it active, and the slider does not navigate to show the final slide fully.
2. After tapping the last dot (which doesn't navigate correctly) and then swiping left and right multiple times, tapping the first pagination dot sometimes fails to navigate back to the beginning of the slider.

To Reproduce

Steps to reproduce the behavior:

1. Set up a Swiper component with the following configuration:
   • slidesPerView: 'auto'
   • spaceBetween: 10 (or any value)
   • loop: true
   • slidesPerGroup: [Dynamically calculated based on container width] (e.g., calculated to show almost a full set of slides but leaving the last one partially visible)
   • pagination: { clickable: true }
   • A sufficient number of slides (SwiperSlide) such that the last slide is initially partially visible.
2. Render the Swiper component.
3. Observe that the last slide is partially visible.
4. Click the last pagination dot.
5. Issue 1: Notice the slider does not move to the last slide, and the last dot does not become active.
6. Swipe left and right several times.
7. Click the first pagination dot.
8. Issue 2: Notice that the slider may not navigate back to the first slide.

Environment:

• Framework: React
• Swiper version: 11.2.6,
• Browser(s): Chrome
• OS: Windows 11

Code Snippet (based on user setup):

import { useState, useEffect, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css/pagination';
import 'swiper/css';
import { Pagination } from 'swiper/modules';

const slideWidth = 120;
const spaceBetween = 10;

function App() {
  // const [swiper, setSwiper] = useState(null); // Removed as unused
  const slideData = Array.from({ length: 15 }, (_, i) => i + 1);
  const swiperContainerRef = useRef(null);
  const [slidesPerGroupValue, setSlidesPerGroupValue] = useState(1);

  useEffect(() => {
    const calculateSlidesPerGroup = () => {
      if (swiperContainerRef.current) {
        const containerWidth = swiperContainerRef.current.offsetWidth;
        // Ensure calculation accounts for spaceBetween correctly for visibility
        const visibleWidth = containerWidth + spaceBetween;
        const slidePlusSpace = slideWidth + spaceBetween;
        const visibleSlides = visibleWidth / slidePlusSpace;
        setSlidesPerGroupValue(Math.floor(visibleSlides) || 1);
      }
    };

    calculateSlidesPerGroup();
    window.addEventListener('resize', calculateSlidesPerGroup);
    return () => window.removeEventListener('resize', calculateSlidesPerGroup);
  }, []);

  return (
    <>
      <h2>Swiper Slider Example</h2>
      <div ref={swiperContainerRef} className="swiper-container">
        <Swiper
          // onInit={setSwiper} // Removed as swiper state is unused
          modules={[Pagination]}
          pagination={{ clickable: true }}
          slidesPerView={'auto'}
          style={{ height: '250px' }}
          spaceBetween={spaceBetween}
          loop={true}
          slidesPerGroup={slidesPerGroupValue}
        >
          {slideData.map((slideNumber) => (
            <SwiperSlide
              key={slideNumber}
              style={{
                width: slideWidth,
                height: '200px',
                background: `#${Math.floor(Math.random()*16777215).toString(16)}`,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              Slide {slideNumber}
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </>
  );
}

export default App;

Additional context

This issue seems particularly related to the combination of loop: true, slidesPerView: 'auto', and clickable pagination, especially when the effective view doesn't perfectly align with a full group at the end.

Expected Behavior

1. Clicking the last pagination dot should navigate the slider so the last slide is fully visible (or as configured by slidesPerView/slidesPerGroup) and the last dot should become active.
2. Clicking the first pagination dot should always navigate the slider back to the first slide when in loop mode.

Actual Behavior

1. Clicking the last pagination dot has no effect on slider position or dot activation state.
2. After interacting with the slider (especially after attempting to click the last dot), clicking the first dot sometimes fails to return to the beginning.

Gif of the bug reproduction

Swiper version

11.2.6

Platform/Target and Browser Versions

Windows 11 Pro 24H2

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR