Infinite loop with slidesPerView: auto, loopFix() issues in nolimits4web Swiper
Explanation of the problem
This is a bug report for Swiper version 4.4.6. The issue has been observed on all platforms and browsers including Windows, Android and Chrome, Opera, Firefox (latest versions). No live link or JSFiddle/Codepen has been provided. The problem occurs when using the following settings in the “big case”:
autoplay: {
delay: 0
},
centeredSlides: true,
coverflowEffect: {
depth: 100,
modifier: 1,
rotate: 5,
stretch: 0
},
effect: 'coverflow',
freeMode: true,
freeModeMomentumBounce: false,
freeModeMomentumRatio: .1,
freeModeMomentumVelocityRatio: .8,
freeModeSticky: true,
grabCursor: true,
loop: true,
loopAdditionalSlides: slidesNum, // slidesNum contains the initial slides number
loopedSlides: slidesNum,
slidesPerView: 'auto',
speed: 20000,
breakpoints: {
360: {
slidesPerView: 1
}
}
CSS styles have been added, but not provided. A “small case” has also been provided, where the problem can be recreated with the following settings:
centeredSlides: true,
loop: true,
loopedSlides: slidesNum,
slidesPerView: 'auto',
The issue occurs when sliding to the right, where duplicated elements do not show up on the right side of the slider, causing a large empty space. This issue is exacerbated when swiping quickly. Occasionally, the slider updates and the duplicates appear in the correct place, but it is too sudden and may be confusing for the user.
Troubleshooting with the Lightrun Developer Observability Platform
Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.
- Instantly add logs to, set metrics in, and take snapshots of live applications
- Insights delivered straight to your IDE or CLI
- Works where you do: dev, QA, staging, CI/CD, and production
Start for free today
Problem solution for Infinite loop with slidesPerView: auto, loopFix() issues in nolimits4web Swiper
To fix this issue it is suggested to modify the conditions of the loop fix method. The loop fix method is used to prevent oversliding, where the slides move beyond the viewport. By modifying the conditions of the loop fix method, the user is able to prevent oversliding when moving to the right. Here is an example of how the user modified the conditions of the loop fix method:
if ((typeof direction === 'undefined' || (typeof direction !== 'undefined' && direction === 'left')) && activeIndex < loopedSlides && !(activeIndex === previousIndex - 1 && previousIndex > loopedSlides / 2)) {
// Fix For Negative Oversliding
} else if ((typeof direction === 'undefined' || (typeof direction !== 'undefined' && direction === 'right')) && (params.slidesPerView === 'auto' && activeIndex >= loopedSlides) || (activeIndex >= slides.length - loopedSlides)) {
// Fix For Positive Oversliding
}
Another important step to fix this issue is by passing an argument to the loop fix method. By passing an argument to the loop fix method, the user is able to determine the swipe direction, which in turn helps to prevent oversliding when moving to the right. The user suggests passing an argument to the loop fix method in several places such as the slideNext method, slidePrev method, and the Autoplay variable initialization. Additionally, the user suggests adding a conditional statement to the onTouchMove method to determine the swipe direction. Here is an example of how the user added a conditional statement to the onTouchMove method:
var diff = swiper.isHorizontal() ? diffX : diffY;
if (!data.isMoved) {
swiper.loopFix(diff > 0 ? 'left' : 'right');
}
It is important to note that the user also suggests commenting out a fragment of code that sometimes causes the slider to freeze. This is done as a safety measure to ensure that the slider is stable and not prone to freezing up.
Other popular problems with nolimits4web Swiper
Problem: Slider not working correctly when moving to the right
One of the most commonly reported issues with the nolimits4web Swiper library is that the slider does not function correctly when moving to the right. This problem can be caused by the width of the slides being less than the width of the viewport. This can cause the slider to overslide when moving to the right, resulting in the incorrect display of slides.
Solution:
One solution to this issue is to modify the conditions of the loop fix method. By passing an argument to the method, the code can determine whether the user is trying to move to the right or the left. This allows the method to adjust the behavior of the slider accordingly. Additionally, a conditional statement can be added to the onTouchMove method to determine the swipe direction. This can be done by adding the following code:
var diff = swiper.isHorizontal() ? diffX : diffY;
if (!data.isMoved) {
swiper.loopFix(diff > 0 ? 'left' : 'right');
}
Problem: Slider freezing
Another common issue with the nolimits4web Swiper library is that the slider can sometimes freeze. This can be caused by the loop fix method being called infinitely, which can cause the slider to become unresponsive.
Solution:
One solution to this issue is to comment out the following fragment of code:
if (needsLoopFix) {
swiper.once('transitionEnd', function () {
swiper.loopFix();
});
}
This will prevent the loop fix method from being called infinitely and will help to prevent the slider from freezing.
Problem: Incorrectly display of slides
Another common problem with the nolimits4web Swiper library is that the slides can be displayed incorrectly. This can occur when the user tries to move to the left or right, and the loop fix method is not able to properly adjust the slider’s behavior.
Solution:
One solution to this issue is to add an argument to the loop fix method, which can be “left,” “right,” or undefined. This allows the method to determine the direction of the swipe and adjust the behavior of the slider accordingly. Additionally, modify the conditions of the loop fix method to take the argument into account. This can be done by adding the following code:
if ((typeof direction === 'undefined' || (typeof direction !== 'undefined' && direction === 'left')) && activeIndex < loopedSlides && !(activeIndex === previousIndex - 1 && previousIndex > loopedSlides / 2)) {
// Fix For Negative Oversliding
} else if ((typeof direction === 'undefined' || (typeof direction !== 'undefined' && direction === 'right')) && (params.slidesPerView === 'auto' && activeIndex >= loopedSlides) || (activeIndex >= slides.length - loopedSlides)) {
// Fix For Positive Oversliding
}
This will help to ensure that the loop fix method is able to properly adjust the behavior of the slider and prevent the display of incorrect slides.
A brief introduction to nolimits4web Swiper
nolimits4web Swiper is a popular JavaScript library for creating touch-enabled, responsive sliders and carousels. It is built with performance and flexibility in mind, and provides a wide range of customization options to suit the needs of any project.
The library utilizes the latest web technologies such as CSS3 transitions, transforms and animations to create smooth and visually pleasing transitions between slides. It also includes a variety of built-in navigation options, including pagination, navigation buttons, and scrollbar, as well as support for various touch and mouse events. Additionally, it is fully responsive and supports a wide range of screen sizes and devices. The library also provides a number of callbacks and APIs for integrating with other libraries and custom logic.
Most popular use cases for nolimits4web Swiper
- Implementing a responsive, touch-enabled carousel or slider on a website or web application. This can be achieved by initializing a new instance of the Swiper class and passing in a container element as well as options for configuring the behavior and appearance of the slider.
const swiperInstance = new Swiper(containerRef.current, {
direction: 'horizontal',
slidesPerView: 'auto',
loopedSlides: 3,
loop: true
});
- Creating a navigation system for a single page web application. The Swiper library allows for easy implementation of navigation between different sections of a webpage by assigning slide elements to correspond to different sections and using the built-in navigation methods to navigate between them.
- Developing a user interface for a mobile application. The Swiper library is optimized for touch-based interactions and can be used to create intuitive and responsive user interfaces for mobile apps. It also offers a wide range of customization options which can be used to create a unique and engaging experience for users.
It’s Really not that Complicated.
You can actually understand what’s going on inside your live applications.