Swiper incorrectly warns about a wrong number of slides for loop mode
MateuszGroth opened this issue · comments
Check that this is really a bug
- I confirm
Reproduction link
https://codesandbox.io/p/devbox/swiper-react-infinite-loop-vfz433?file=%2Fsrc%2FApp.jsx
Bug description
If you attempt to render a basic loop swiper with any number of slides within jest tests the swiper warns about the incorrect number of slides when it shouldn't
The Swiper
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
const modules = [Navigation, Pagination, Autoplay];
export const App = () => {
return (
<Swiper
loop
slidesPerView={1}
slidesPerGroup={1}
loopAddBlankSlides
modules={modules}
>
<SwiperSlide>test</SwiperSlide>
<SwiperSlide>test</SwiperSlide>
<SwiperSlide>test</SwiperSlide>
<SwiperSlide>test</SwiperSlide>
<SwiperSlide>test</SwiperSlide>
<SwiperSlide>test</SwiperSlide>
</Swiper>
);
};
the test
import { render } from '@testing-library/react';
import { App } from './abc';
describe('App', () => {
it('App', () => {
render(<App />);
});
});
Caution
Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters
Expected Behavior
No warning
Actual Behavior
Warning
Swiper version
11.1.4
Platform/Target and Browser Versions
macOS 14.5
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
Added the bug to the Swiper element as I believe this is where the issue lays
The 'slides' is an empty list in the loopFix method
There is this loopCreate
method that has initSlides
. Shouldn't there be a
swiper.slides = slides
at the end?
like
const initSlides = () => {
const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);
slides.forEach((el, index) => {
el.setAttribute('data-swiper-slide-index', index);
});
swiper.slides = slides
};
have the same issue