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
Related
My first question here on Stack overflow! Hopefully someone can help.
I created an autoplay slider with swiper.js and although it keeps sliding nicely, it always stops or slows down between each slide. How do I get it to continue smoothly?
I tried removing some of my parameters but nothing seems to help.
var swiper = new Swiper(".mySwiper", {
// grabCursor: true,
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false
},
// freeMode: true,
speed: 1000,
spaceBetween: 0,
// keyboard: {
// enabled: true,
// },
breakpoints: {
320: {
slidesPerView: 1.2,
},
500: {
slidesPerView: 2.2,
},
650: {
slidesPerView: 2.5,
},
840: {
slidesPerView: 3,
},
1000: {
slidesPerView: 3.5,
}
}
});
.mySwiper {
-webkit-transition-timing-function:linear!important;
-o-transition-timing-function:linear!important;
transition-timing-function:linear!important;
}
.our_brand-section_image img {
max-width: 200px;
}
/* Swiper Styles */
.swiper-slide {
/* 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;
margin: auto;
}
<head>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
</head>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="our_brand-section-image_section swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper mySwiper">
<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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
</div>
</div>
Adding this solved the issue for me.
.swiper-wrapper {
transition-timing-function: linear;
}
When I set
loop: true,
scrollbar: { el: '.swiper-scrollbar' },
centeredSlides:true
as options for Swiper JS, the scrollbar is away from the left.
The behavior I'm expecting is the scrollbar to be in full left position on the first slide and fully right positioned on the last slide.
Demo
var swiper = new Swiper(".swiper-container", {
slidesPerView:5,
centeredSlides:true,
loop:true,
scrollbar: {
el: ".swiper-scrollbar",
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><br><br><br>Slide 1<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 2<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 3<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 4<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 5<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 6<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 7<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 8<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 9<br><br><br></div>
<div class="swiper-slide"><br><br><br>Slide 10<br><br><br></div>
</div>
<!-- Add Scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
Am I doing something wrong?
https://codepen.io/pen/rNeGKrB
"It is by design. The scrollbar is not supported with loop mode"
(swiper official answer). Read under this Github Issue: https://github.com/nolimits4web/swiper/issues/2315
Also the centeredSlides:true not working well combine with .swiper-scrollbar
Support setting (True to Sep 20)
You should use the centeredSlides:false & loop:false.
/* Support setting */
var swiper = new Swiper(".swiper-container", {
slidesPerView:5,
centeredSlides:false,
loop:false,
scrollbar: {
el: ".swiper-scrollbar",
}
});
SUM: No way to solve/answer this (You could open GitHub issue/feature-request her: https://github.com/nolimits4web/swiper/issues).
Working example:
var swiper = new Swiper(".swiper-container", {
slidesPerView:3,
centeredSlides:false,
spaceBetween: 10,
loop:false,
grabCursor: true,
scrollbar: {
el: ".swiper-scrollbar",
}
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 150px;
}
.swiper-slide {
text-align: center;
font-size: 15px;
background: #fff;
border: 1px solid lightgray;
/* 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;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Swiper -->
<div class="swiper-container">
<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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<!-- Add Scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Demo: https://swiperjs.com/demos/#scrollbar
API docs: https://swiperjs.com/api/#scrollbar
The swiper flips through the slides when you click on the buttons and works autoplay, but does not stop when the mouse cursor is over a particular swiper. What could be a mistake?
P.S. Swiper with github.
https://github.com/nolimits4web/Swiper/blob/master/demos/280-autoplay.html
<div class="swiper-container">
<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>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
You can use swiper.autoplay.stop() to pause the autoplay on mouseover
and swiper.autoplay.start() on mouseout to start the autoplay again.
Check the code snippet, made based on the link you provided.
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
// now add mouseover and mouse out events on '.swiper-slide' elemnts to pause and resume the autoplay;
$('.swiper-slide').on('mouseover', function() {
swiper.autoplay.stop();
});
$('.swiper-slide').on('mouseout', function() {
swiper.autoplay.start();
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css" rel="stylesheet" />
<div class="swiper-container">
<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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Environment
Browser: Chrome Version 69.0.3497.92 (Official Build) (64-bit)
Components: ganlanyuan/tiny-slider found here
Background:
I have a slider created using tiny-slider. It works well. Also on the same page, I have an overlay div which overlays the whole page.
The Issue:
The exact problem is, On my slider I have an element (I am calling it the active element) which should be seen over the 'overlay' layer. Which means all other slider item should be under the overlay except the active element.
I am giving the overlay z-index: 999 and active item z-index: 9999.
Technically we expect that the active comes in front of the overlay. But it doesn't.
What I Expect to get:
What I actually get:
I am aware of that this issue is because the slider uses transform:translate3d to move the items left and right which is canceling the z-index.
I have read most solutions that I found on google but no luck.
I regenerated this problem on codepen. here is the link https://codepen.io/peshraw-h-ahmed/pen/pOZNdg.
Is there any solution for that problem? Can anyone tell me where the problem is and fix it inside the codepen snippet.
The Codes:
tns({
"container": ".base",
"items": 4,
autoplay: false,
"nav": false,
"slideBy": "page",
"mouseDrag": true,
"swipeAngle": false,
"speed": 400
})
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 999;
}
.item {
background: #e67e22;
height: 450px;
color: #fff;
border: 1px solid;
}
.item.active {
z-index: 9999;
background: #2c3e50;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js"></script>
<div class="base">
<div class="item">Item</div>
<div class="item active">Active Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="overlay">
Overlay
</div>
You can change the overlay so it belong to the stacking context generated by the transform and you will be able to make the active element above it:
tns({
"container": ".base",
"items": 4,
autoplay: false,
"nav": false,
"slideBy": "page",
"mouseDrag": true,
"swipeAngle": false,
"speed": 400
})
/*the Overlay*/
.base:before {
content:"";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 999;
}
/**/
.item {
background: #e67e22;
height: 450px;
color: #fff;
border: 1px solid;
position:relative;
}
.item.active {
z-index: 9999;
background: #2c3e50;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js"></script>
<div class="base">
<div class="item">Item</div>
<div class="item active">Active Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
I've been trying to put a next/prev button on my swiper and I can't get it to work I've tried various stuff and its just not working, can someone put out why its not working. I'm using jquery one not zepto.
Tried this one.
<span class="button-next">Next button</span>
<span class="button-prev">Previous button</span>
<script>
$(function(){
var mySwiper = $('.swiper-container').swiper();
$('.button-next').click(function(){mySwiper.swipeNext()})
$('.button-prev').click(function(){mySwiper.swipePrev()})
})
</script>
This is how I initialise my swipe which is working fine.
var swiper1 = new Swiper('.swiper-container.newscol-swiper',{
slideClass: 'post-item',
slidesPerView: 4,
slidesPerViewFit: false,
loop: true,
centeredSlides: true,
autoplay: 5000,
speed: 400,
calculateHeight: true,
roundLength: true,
mode: 'horizontal'
})
Have you tried using the following? (make sure you use the latest version of Swiper)
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* 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;
}
<link href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="swiper-container">
<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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
As instructed here:
https://github.com/nolimits4web/Swiper/blob/master/demos/14-nav-arrows.html