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 image sliders to come down and form a table?

I did a swiper slideshow that swipes images automatically and it is working very well. but now I would like to make all the images with the information written below it to go down after doing the slideshow and appear in the form of a table. Below is my source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/swiper.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
<script type ="text/javascript" src="../js/swiper.min.js"></script>
<style type="text/css">
body
{
background: black;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide
{
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
background: white;
}
.swiper-slide .imgBx{
width: 100%;
height: 200px;
overflow: hidden;
}
.swiper-slide .imgBx img{
width: 100%;
}
.swiper-slide .details{
box-sizing: border-box;
font-size: 20px;
padding: 20px;
}
.swiper-slide .imgBx h3{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.swiper-slide .imgBx h3 span{
font-size: 16px;
color: red;
}
</style>
</head>
<body style="background: grey ;">
<div class="row" >
<div class="col-md-3 input-group input-group-sm" style="margin-left: 70%; margin-top: 10px;">
<input type="number" name="numb" class=" form-control col-sm" placeholder=" Mentors" >
<button type="submit" class="btn btn-dark acc_active">Ment</button>
</div>
</div>
<div class="row" style="margin-left: 350px; margin-top: 250px;" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-md-12 container d-flex">
<div class="box-1">
<div class="ping">
</div>
</div>
<div>
<a href="table.php>"> <button id="btn-go" style="width: 100px; margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
Shuffle
</button></a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="box-1">
<div class="ping">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 60,
stretch: 15,
depth: 190,
modifier: 3,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
<?php
include "header.php";
?>
<?php
include "footer.php"
?>

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>

How to conditionally add next and prev arrows based on slick carousel width?

I am attempting to add the next and prev arrows for the Slick Carousel (latest version) conditionally when the content takes up more space then the outer container (<div class="container">).
Example:
Content fits inside container (expected results)
Content does not fit inside container (expected results)
Goal:
If the content overflows beyond the container then add the arrows else do not
Here is what I have setup but it does not work to add the arrows conditionally.
This code highlights the current results and issue.
I have attempted to use the responsive setting but that will always add the arrows if the breakpoint is met, which is not what i want
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab 1
</div>
<div class="item">
tab 2
</div>
<div class="item">
tab 3
</div>
<div class="item">
tab 4
</div>
<div class="item">
tab 5
</div>
<div class="item">
tab 6
</div>
</div>
</div>
</div>
</div>
Current output:

I found the answer to this.
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
slidesToShow: 5,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
var childrenWidth = 0;
$('.carousel .slick-track').children().each(function() {
childrenWidth += $(this).width();
});
var outerContainerWidth = $('.carousel').width();
if(childrenWidth < outerContainerWidth) {
var nextArrow = $('.next-arrow');
if(!(nextArrow.hasClass('slick-disabled'))) {
nextArrow.addClass('slick-disabled');
}
}
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab number 1
</div>
<div class="item">
tab number 2
</div>
<div class="item">
tab number 3
</div>
<div class="item">
tab number 4
</div>
<div class="item">
tab number 5
</div>
<div class="item">
tab number 6
</div>
</div>
</div>
</div>
</div>