Continuous Scrolling Swiper Setup
User
var swiper = new Swiper(".swiperslides", {
slidesPerView:3,
spaceBetween: 30,
loop: true, // Enable infinite looping
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction:false,
},
pagination: false,
speed: 8000,
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
make above continous scrolling
slidesPerView:3,
spaceBetween: 30,
loop: true, // Enable infinite looping
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction:false,
},
pagination: false,
speed: 8000,
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
make above continous scrolling
Assistant
To make your Swiper slider scroll continuously without any pauses or interruptions, you need to tweak the `autoplay` settings and add the `loop` functionality. Here's the updated code:
var swiper = new Swiper(".swiperslides", {
slidesPerView: 3,
spaceBetween: 30,
loop: true, // Enable infinite looping
autoplay: {
delay: 0, // Set to 0 for continuous scrolling
pauseOnMouseEnter: true, // Pause on hover
disableOnInteraction: false, // Keep autoplay after interaction
},
speed: 8000, // Adjust speed for continuous scrolling
allowTouchMove: false, // Disable manual swiping for a smoother effect
pagination: false, // Disable pagination
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});### Key Changes:
1. **`delay: 0`**: Ensures no delay between transitions, creating a continuous scrolling effect.
2. **`allowTouchMove: false`**: Disables manual swiping to prevent interruptions.
3. **`loop: true`**: Allows infinite looping of slides.
4. **`speed: 8000`**: Defines the time it takes for a single loop (adjust as needed).
This configuration ensures a smooth, continuous scrolling experience while maintaining responsiveness.