You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Swiper slides that include more than 4 images do not load correctly. Images 5+ are stuck loading as per the screenshot below. This happens on all product pages of our website.
I have tested increasing the slidesPerView param to include 5 or 10 images and they all load "correctly' as seen in the second screenshot, but once we're back to 1 or 1.5 perView the bug comes back.
Here is the js, where I left all the possible fixes I've tried so far:
var thisSwiper = [];
$('.swiper-product-images').each(function(i) {
var this_ID = "swiper-images";
thisSwiper[i] = new Swiper(".swiper-product-images", {
observer: true,
observeParents: true,
observeSlideChildren: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
slidesPerGroup:1,
slidesPerView:1,
spaceBetween:0,
speed:1000,
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 0,
},
768: {
slidesPerView: 1,
spaceBetween: 0,
},
1024: {
slidesPerView: 1.5,
slidesPerGroup:1,
spaceBetween: 5,
},
},
pagination: {
el: '.swiper-pagination',
clickable:true
},
});
});
});```
### Expected Behavior
_No response_
### Actual Behavior
_No response_
### Swiper version
8.0.6
### Platform/Target and Browser Versions
OS: MacOS, Windows, Android, Broswer: Chrome, IE, Safari
### Validations
- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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
This discussion was converted from issue #7343 on March 19, 2024 06:46.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Check that this is really a bug
Reproduction link
https://www.davelo.ca/en/22-rockhopper-29.html
Bug description
Swiper slides that include more than 4 images do not load correctly. Images 5+ are stuck loading as per the screenshot below. This happens on all product pages of our website.
I have tested increasing the slidesPerView param to include 5 or 10 images and they all load "correctly' as seen in the second screenshot, but once we're back to 1 or 1.5 perView the bug comes back.
Here is the js, where I left all the possible fixes I've tried so far:
Beta Was this translation helpful? Give feedback.
All reactions