We Keep Coding

SwiperJS - I don't want that when I click on a button inside a slider, it brings that slider to the first position

When I click on a button that I have inside my slider, instead of executing what the button should do, what it does is take that slider to position 1 of the carousel. what I want is that this does not happen since it does not allow the action of the button to be executed, which is to open an overlay. I leave a video so that it is better understood.
I checked the documentation and I couldn't solve it.
This is my code:
let swiperTrending = new Swiper(".swiper-container-trending", {
slidesPerGroup: 1,
autoplay: {
delay: 3000,
},
speed: 1000,
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
100: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 60,
},
},
});
https://sendvid.com/rkza0bku

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.

swiper.js | Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave

How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoplay() and .startAutoplay() function but not worked for me.
This is my output : click here
And here is the js code :
<script>
var slider = new Swiper ('#slider', {
slidesPerView: 1,
autoplay: 1000,
spaceBetween: 0,
loop: true,
loopedSlides: 6,
centeredSlides : true,
　disableOnInteraction: true,
autoplayDisableOnInteraction: false,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: '1.3',
breakpoints: {
600: {
slidesPerView: 1
}
}
});
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loopedSlides: 6,
loop: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true,
breakpoints: {
600: {
slidesPerView: 3
}
}
});
slider.params.control = thumbs;
thumbs.params.control = slider;
$("#slider").mouseenter(function() {
slider.autoplay.stop();
});
$("#slider").mouseleave(function() {
slider.autoplay.start();
});
$("#thumbs").mouseenter(function() {
thumbs.autoplay.stop();
});
$("#thumbs").mouseleave(function() {
thumbs.autoplay.start();
});
</script>

Try to use $el element returned from instance. It works fine.
slider.$el.on('mouseover', () => {
slider.autoplay.stop();
});
slider.$el.on('mouseleave', () => {
slider.autoplay.start();
});
Check this example:
https://codepen.io/keitoliveira/pen/XWKdXMr

Carousel Vue Awesome Swiper has bug looping

I'm working in Nuxt and i Have a bug with a carousel from Vue Awesome Swiper, my problem is it doesn't looping infinity like i hope, this have multiple slider, i think it's the problem
enter image description here
When I want to go to the products on the left it does not end at the end of the cycle, and so on the contrary, if I go to the end the following elements do not send me to the beginning of the cycle
This my code for set up
swiperOption3: {
initialSlide: 0,
freeMode: true,
slidesPerView: 2,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
autoplay: {
delay: 2000,
disableOnInteraction: false
},
breakpoints: {
1024: {
slidesPerView: 2,
spaceBetween: 10
},
868: {
slidesPerView: 2,
spaceBetween: 20
},
800: {
slidesPerView: 2,
spaceBetween: 10
},
768: {
slidesPerView: 1,
spaceBetween: 0
},
640: {
slidesPerView: 2,
spaceBetween: 10
},
500: {
slidesPerView: 1,
spaceBetween: 10
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
}
and this is a summary of my html
<swiper
:options="swiperOption3"
style="min-height:290px; margin-top:2%"
ref="swiperMaxCard"
>
<swiper-slide
v-for="(item, index) in imagenes"
:key="index"
style="text-align: -webkit-center;"
>
<div v-if="
index != $refs.swiperMaxCard.swiper.activeIndex + 1 &&
!$vuetify.breakpoint.smOnly
"></div>
<div v-if="index == $refs.swiperMaxCard.swiper.activeIndex + 1 ||
$vuetify.breakpoint.smOnly
"></div>
</swiper-slide>
</swiper>
In code it looks like this enter image description here, but if it's working should have many copys of the DOM, it works with one slider for view. I saw that several people have worked, but still report cases of a bug in the loop, this is the tool https://github.com/surmon-china/vue-awesome-swiper

Owl carousel responsive 1170px div width issue

When my display size in less than 1170px owl carousel div width overflow. What am I do?
jQuery(document).ready(function($) {
"use strict";
// TESTIMONIALS CAROUSEL HOOK
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 0,
autoplay: true,
dots:false,
autoplayTimeout: 8500,
smartSpeed: 450,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3,
nav:true
}
}
});
});

Try this ! autoWidth true or you modify css!
In js
$('.owl-carousel').owlCarousel({
margin:10,
loop:true,
autoWidth:true,
items:4
})
or in css
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}