We Keep Coding

Swiper JS has some delay when calling the stop method

I'm using SwiperJS framework. I'm working on a project where I need to pause the slider from animating when the items are hovered on. My working code stops it from animating but it has some delays before it stops. How can I prevent the delay?
$mySwiper = $(".swiper-container");
new Swiper($mySwiper[0], {
spaceBetween: 0,
centeredSlides: true,
direction: "vertical",
speed: 4000,
autoplay: {
delay: 1,
},
cssEase: "linear",
loop: true,
slidesPerView: "auto",
allowTouchMove: false,
});
$mySwiper.hover(
function () {
$mySwiper.css("background", "yellow");
this.swiper.autoplay.stop();
},
function () {
$mySwiper.css("background", "none");
this.swiper.autoplay.start();
}
);
.swiper-container {
width: 100%;
max-width: 940px;
height: 500px;
margin: 0 auto;
}
.swiper-container .swiper-slide {
border-bottom: #ccc solid 1px;
height: auto;
}
.swiper-container .swiper-slide {
text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-container img {
max-height: 200px;
}
.swiper-container .swiper-wrapper {
transition-timing-function: linear;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=1" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=2" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=3" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=4" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=5" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=6" alt=""></div>
</div>
</div>

This can be a little confusing.
The API swiper.autoplay.stop() changes autoplay mode => (Not "freeze/stop" the "current" slider transform position).
Set very slow AutoPlay speed to see this idea in action:
const swiper = new Swiper('.swiper', {
spaceBetween: 0,
centeredSlides: true,
//direction: "vertical",
speed: 7000,
autoplay: {
delay: 10,
pauseOnMouseEnter: true,
},
loop: true,
slidesPerView: "auto",
});
swiper.on('autoplay', function () {
$("#status").text("autoplay")
});
swiper.on('autoplayStop', function () {
$("#status").text("Wait until autoplayStop");
$("#status").css("color", "red");
});
#status{
color: green;
}
.swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-container img {
max-height: 200px;
}
<!-- swiper 8 -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<h4 id="status"></h4>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=1" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=2" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=3" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=4" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=5" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/450/300?random=6" alt=""></div>
</div>
</div>
SUM: Hover > The transition of "this" slide ends > autoplay disable.
Good -or- bad this is the API.
https://swiperjs.com/swiper-api#autoplay
Old related github issue:
https://github.com/nolimits4web/Swiper/issues/1798

GIF files are not animated in the Swiper slider

I need gifs to be animated always. When the page loads, the gif animates for the first second, and then stops. In order for it to start, I have to press the left mouse button.
When I remove the cursor from the image, it becomes inactive again.
What can be done to make gifs animated? What are the ways to solve this problem.
var swiper = new Swiper('.swiper-container', {
effect: 'cube',
grabCursor: true,
slidesPerView: 'auto',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 50,
shadowScale: 0.3,
centerSlidesBounds: true,
},
direction: 'horizontal',
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
.main {
position: absolute;
//padding: 16px;
//margin-top:60px;
width: 50%;
}
.swiper-button-prev{
left: 2%;
}
.swiper-button-next{
left: 92%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
width: 100%;
bottom: -25%;
position: relative;
}
.left-element {
background: silver;
display: inline-block;
position: absolute;
left: 100%;
width: 80%;
margin-top: 0;
}
h1.left-element {
width: 80%;
height: 90%
}
img{
width: 100%;
height: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Gif</title>
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="main">
<h1 class="left-element">12345</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
</html>

how to make div to next row by using script?

i use slide swiper to display 12 product.
as you can see in the code the slide displayed in one row
so i wanna make it two rows and each row display two products so
as a result, one slide show 4 products by using 2 rows.
but here is problem, i use site which manage site
in there i can bring the products img and information using some specific code
like this ->
so now my coding look like second coding.
so i have to make some script to make 1row in each slide to 2 rows
any help will be so appreciated ! thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Demo styles -->
<style>
body,
html {
padding: 0;
margin: 0;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.swiper-slide img {
display: block;
width: 100%;
}
#media only screen and (min-width: 769px) {
.swiper-slide:first-child {
transition: transform 100ms;
}
.swiper-slide:first-child img {
transition: box-shadow 500ms;
}
.swiper-slide.swiper-slide-active:first-child {
transform: translateX(50%);
z-index: 2;
}
.swiper-slide.swiper-slide-active:first-child img {
box-shadow: 0px 32px 80px rgba(0, 0, 0, 0.35);
}
.swiper-slide:nth-child(2) {
transition: transform 100ms;
}
.swiper-slide.swiper-slide-next:nth-child(2) {
transform: translateX(55%);
z-index: 1;
}
.swiper-container[dir=rtl] .swiper-slide.swiper-slide-active:first-child {
transform: translateX(-50%);
}
.swiper-container[dir=rtl] .swiper-slide.swiper-slide-next:nth-child(2) {
transform: translateX(-55%);
}
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-001.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-002.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-003.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-004.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-005.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-006.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-007.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-008.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-009.jpg"></div>
</div>
<div class="swiper-scrollbar"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
centeredSlides: false,
slidesPerGroupSkip: 1,
grabCursor: true,
keyboard: { enabled: true },
breakpoints: { 769: { slidesPerView: 2, slidesPerGroup: 2 } },
scrollbar: { el: '.swiper-scrollbar' },
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
pagination: { el: '.swiper-pagination', clickable: true }
});
</script>
</body>
</html>
<div class="swiper-containertwo">
<div class="swiper-wrapper" style="margin-bottom:15px !important;">
<!--/loop_recmd_product(12)/-->
<div class="swiper-slide">
<div>
<a href="<!--/recmd_product#link/-->" class="SMS_Viewlink">
<dt class="thumb"><img src="<!--/recmd_product#mobile_image/-->" class="img" alt="" /></dt>
</a>
</div>
<div class="item-price-wrap">
<!--/if_recmd_product#is_soldout/-->
<div class="item-title">sold out<strike><!--/recmd_product#name(200)/--></strike></div>
<!--/else/-->
<div class="item-title"><!--/recmd_product#name(200)/--></div>
<!--/if_recmd_product#price_consumer(+1)/-->
<span class="item-price"><strike><!--/number/recmd_product#price_consumer/--><span class="won">$</span></strike></span>
<!--/end_if/-->
<!--/if_recmd_product#is_term_discount/-->
<span class="item-price"><strike><!--/number/recmd_product#price_sell/--><span class="won">$</span></strike></span>
<span class="item-price"><!--/number/recmd_product#price_discount/--><span class="won">$</span></span>
<!--/else/-->
<span class="item-price"><!--/if_recmd_product#price_replace/--><font class="item-price"><!--/recmd_product#price_replace/--><!--/else/--><!--/number/recmd_product#price_sell/--><span class="won">$</span><!--/end_if/--></font></span>
<!--/end_if/-->
<!--/end_if/-->
</div>
<!--/if_recmd_product#subname/-->
<div class="etc-info">
<div class="size"><!--/recmd_product#subname(150)/--></div>
<div class="review"><div class="name crema-product-reviews-count" data-product-code="<!--/recmd_product#uid/-->" data-format="리뷰 {{{count}}}" data-hide-if-zero="1"></div></div>
</div>
<!--/else/-->
<div class="review"><div class="name crema-product-reviews-count" data-product-code="<!--/recmd_product#uid/-->" data-format="리뷰 {{{count}}}" data-hide-if-zero="1"></div></div>
<!--/end_if/-->
<div class="icon-tags">
<!--/if_recmd_product#discount_icon/-->
<span style="padding-right:5px;"><img src="<!--/recmd_product#discount_icon/-->"></span>
<!--/end_if/-->
<!--/if_recmd_product#icons/-->
<!--/recmd_product#icons/-->
<!--/end_if/-->
</div>
</div>
<!--/end_loop/-->
</div>
<div class="swiper-scrollbartwo"></div>
</div>
<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-containertwo', {
slidesPerView: 4,
spaceBetween: 10,
slidesPerGroupSkip: 1,
centeredSlides: false,
grabCursor: true,
rows: 2,
breakpoints: { 769: { slidesPerView: 4, slidesPerGroup: 4,rows: 2 } },
scrollbar: { el: '.swiper-scrollbartwo' },
});
</script>

adding
slidesPerView: 2,
slidesPerColumn: 2,
slidesPerGroup:3,
this in script

Why Swiper JS arrows begin to work after I move a slide with a swipe and how can I fix it?

I got swiper-js slider that's opens in a modal window. The arrows doesn't work until I drag(even a slight drag is enough) a photo left of right. After that everything is ok. I've added "observer: true";
"observeParents: true" parameters to the code - that doesn't solve the issue. Need some help!
HTML:
<div id="overlay" class="hidden">
<div class="swiper-container modal-preview-gallery">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/bigger/${fileName}" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/bigger/${fileName}" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/bigger/${fileName}" alt="" />
</div>
</div>
<div class="swiper-button-next overlay-arrow"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
CSS:
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
z-index: 99;
background: #607a68c5;
}
.modal-preview-gallery {
width: 1000px;
height: 700px;
overflow-x: hidden;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.modal-preview-gallery .swiper-wrapper {
width: 100%;
height: 100%;
}
.hidden {
display: none !important;
}
JS:
photo.addEventListener("click", (e) => {
if (e.target.tagName === "IMG") {
modalPreviewSwiper.slideTo(
+e.target.parentElement.dataset.swiperSlideIndex + 1
);
toogleGallery();
};
let modalPreviewSwiper = new Swiper(".modal-preview-gallery", {
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
observer: true,
observeParents: true,
});
modalPreviewSwiper.update();

How to change swiper slide carousel in swiper.js?

I'm struggling with changing swiper slide carousel in cover flow.
This is what I got for now.
var mySwiper = new Swiper('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 0,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
coverflow: {
rotate: 0,
stretch: 0,
depth: 250,
modifier: 1,
slideShadows: false,
}
})
.swiper-container-aboutus {
height: 500px;
}
.swiper-slide{
background-color: rgb(255, 0, 0);
width: 490px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
overflow: hidden;
height: 490px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
It functions but I would like to change carousel to look like this:
I have tried by adding this piece of code:
.swiper-slide{
background-color: rgb(255, 0, 0);
width: 490px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
overflow: hidden;
height: 490px;
transform: rotate(45deg) !important;
}
I added transform: rotate(45deg) !important; to transform the slides in diamond shape and they were transformed, but with that I have lost builtin swiper.js translate3d() function.
Is that possible with Swiper.js to edit slides it that way and still have cover flow working as it should?
Any other tips are greatly welcomed.
EDIT
When I put
loop:true;
centeredSlides: true,
slidesPerView: 3,
initialSlide: 2,
My cover flow starts from left side and not from middle like I would like.
Why is that? On photo you can see it, and when I click for next one it shifts to right side.
Is it possible to start centered? I though that this centeredSlides: true will do it.

var mySwiper = new Swiper('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 0,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
coverflow: {
rotate: 0,
stretch: 0,
depth: 250,
modifier: 1,
slideShadows: false,
}
})
.swiper-container-aboutus {
height: 200px;
}
.swiper-slide {
width: 60px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
height: 60px;
}
.slide-content {
background-color: rgb(255, 0, 0);
height: 100%;
border: 1px solid;
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-content">
Slide 1
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 2
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 3
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 4
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>