We Keep Coding

In Swiper.js, why the carousel scrolls in a different direction when holding the space between slides?

I have a horizontal carousel.
It works fine when holding and swiping the slides, scrolling horizontally.
But when holding and swiping the space between slides, it scrolls vertically instead, which is wrong.
I am wondering how to solve that.
It seems that the spaces between the slides are considered outside the swiper, instead of a part of the swiper.
Here is my config for the swiper HTML element.
private setSwiperConfig(): void {
this.swiperConfig = {
centeredSlides: false,
spaceBetween: 24,
slidesPerView: 'auto',
grabCursor: true,
allowTouchMove: true,
shortSwipes: true,
touchEventsTarget: 'wrapper',
lazy: true,
mousewheel: {
forceToAxis: true
},
freeMode: true,
speed: 500
};
}
Please help!
Thanks in advance!

Make thumbs scroll one at a time in SwiperJS

Trying to make a simple carousel with an associated thumbs carousel under it:
// Thumbs
const galleryThumbs = new Swiper(thumbsElement, {
spaceBetween: 10,
slidesPerView: 4,
scrollbar: true,
breakpoints: {
768: {
slidesPerView: 8,
},
},
});
// Slides
const galleryTop = new Swiper(top, {
spaceBetween: 10,
effect: "fade",
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
multipleActiveThumbs: false,
thumbs: {
swiper: galleryThumbs,
},
});
This is working as described, but I have a problem:
When one scrolls to the next image using the navigation arrows, and the corresponding thumbnail is out of sight, the thumbnails scroll in group(by the amount described in the slidesPerView setting). I'm looking for a way for it to scroll just by one, as it does when scrolling with the back arrow.

My Swiper.js doesn't stop on hover (only after adding speed parameter)

So I want to do this swiper.js carousel which slides linear from right to the left and after mouse hover it would stop. I used this function which works pretty fine:
$(".swiper-container3").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
If speed parameter is not defined in my swiper initialization function, then it stops after a hover (but only if the nearest slider will be on center of carousel).
How to force swiper.js to stop with the function above but not to wait for one of the sliders to be on center?
Rest of the code
const enableSwiper3 = function(){
mySwiper3 = new Swiper ('#swiper-container3', {
loop: true,
slidesPerView: "auto",
spaceBetween: 10,
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
freeMode: false,
pagination: {
el: '#swiper-pagination3',
},
paginationClickable: true,
breakpoints: {
400: {
slidesPerView: 'auto',
spaceBetween: 20,
loop: true
},
767: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
},
speed: 10000,
}
}
});
mySwiper3.autoplay.start();
}
I also want to lower its speed so whole slider goes linear very slow and just after hovering it it stops. Example on the site below: https://www.intercom.com/ (people are talking section).

Swiper.js Loop: true not working when slidesPerView and slidesPerColumn set

When using the very popular swiper.js, normally works as expected. However currently loop = true is not working because we have slidesPerView and slidesPerColumn enabled.
Currently have:
var mySwiper = new Swiper ('#my-swiper', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 30,
speed: 2000,
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
Several others have ran into a similar issue but not clear solution. One noted they added to help resolve the issue:
setTimeout(function(){
mySwiper.update(true);
mySwiper.slideTo(0, 0)
}, 100);
Tried adding after the above code block but they there is no motion at all. If I added it inside the above code block then it shows one large thumbnail per slide vs 6. Any thoughts?

The developer has confirmed currently slidesPerColumn is not compatible with looping which is why it breaks. Hopefully this will be fixed soon. In the meantime, my workaround is have to instances to simulate 2 rows. Not ideal for a couple reasons but the end result for the user at least is the same.

In 2022 with Swiper v8.4.2 :
-> set a number of slides per view by default,
otherwise Swiper fail to enable infinite loop
<div class="swiper-wrapper">
<!-- swiper-slides ... -->
<div class="swiper-slide">
<img src="..." alt="..."/>
</div>
<!-- ... swiper-slides -->
</div>
my config Swiper :
var init_Swiper = new Swiper('#related_prods',{
// Swiper options :
direction : 'horizontal',
// set a number of slides per view by default
// otherwise Swiper fail to enable infinite loop
slidesPerView: 4,
spaceBetween: 16,
centerInsufficientSlides : true,
centeredSlidesBounds : true,
loop: true,
autoHeight: false,
grabCursor: true,
mousewheel: false,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 16,
},
767: {
slidesPerView: 3,
spaceBetween: 16,
},
0 : {
slidesPerView: 2,
spaceBetween: 10,
}
},
navigation: {
nextEl: ".swiper-related_products-next",
prevEl: ".swiper-related_products-prev",
},
});

Showing half of the prev and next images in owl carousel

I have implemented owl carousel in my application. I need to show half of prev and next images on the modal gallery of main image.
The modal gallery opens when you click on the main bigger image of the page. I tried to set stagePadding property, but it didnt work out.
Can I achieve the same without stagePadding property.
I have implemented thumbnails and other parts. You can view the implemented fuctionality here.
https://www.realtor.com/realestateandhomes-detail/6836-Xana-Way_Carlsbad_CA_92009_M29922-47778
galleryId.owlCarousel({
items: 1,
loop: true,
margin: 5,
startPosition: 1,
animateOut: 'fadeOut',
navSpeed: 100,
lazyLoad: true,
dots: false,
nav: true,
stagePadding: 100,
});

i had the same problem and my problem was solved with center:false.
$(".owl-carousel").owlCarousel({
center:false,
nav: true,
dots: false,
loop: true,
autoHeight: true,
autoWidth:false,
stagePadding: 10,
margin: 30
});