Here is the code I used for my swiper element:
new Swiper("#swiper-pricing", {
slidesPerView: 1.3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
keyboard: {
enabled: true,
},
autoplay: {
delay: 5000,
},
loopFillGroupWithBlank: true,
a11y: {
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide',
},
navigation: {
nextEl: "#nav-right",
prevEl: "#nav-left"
},
pagination: {
el: "#swiper-pricing .swiper-custom-pagination",
clickable: true,
},
})
I have included CSS using:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/><script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>Initially, I suspected a conflict with Bootstrap 5.3, but removing the CSS did not resolve the issue.
It is important to note that I require the slidesPerView value of 1.3.
I am seeking assistance in ensuring smooth swiping without skipping on RIGHT SWIPE while working perfectly on left swipe.