Stop the swiper on mouseover and start playback on mouseout - javascript

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>

Related

Swiper.js slows down on autoplay between slides

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;
}

Strange behaviour of Swiper JS scrollbar

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

Using HTML, CSS, javascript how to mange carousel slider in desktop as well as mobile view?https://i.stack.imgur.com/yzW5B.jpg

How can I manage using HTML, CSS and Javascript, manage carousel slider manage in desktop and Mobile view as well as?

You just need to use a library that supports breakpoints.
The one I prefer is Swiper Slider, you'd just need to change the slidesPerView parameter at different screen width breakpoints, and it also offers touch support.

Just checkout this example fiddle.
It's what you are asking for, and you can also customize it based on the device width.
And for more info on this plugin go to this github repository.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
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;
}
<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>
</div>
And this is the js code:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView: 5,
spaceBetween: 50,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 1,
spaceBetween: 30
},
640: {
slidesPerView: 1,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});

Showing number of slides on the web page

I wrote a custom slider as shown in this codepen:
http://codepen.io/anon/pen/NqQpjG
I added extra feature which counts total number of slides that are moved. For example, if total slides are 8, then starting value would be like this:
Slides: 0/8. When one slide moves, it becomes Slides: 1/8 and so on. Here is my code:
<div>
<span id="numberSlides">0/0 Offers</span>
</div>
JS
var slide = new slide('.swiper-slide', {
var totalSlides = 10;
var newSlide = document.getElementsByClassName('swiper-slide');
var newValue = newSlide + 1;
document.getElementById('numberSlides').innerHTML = newValue + "/" + totalSlides + " Slides";
});
But it isn't working. How can I display the number of slides that are moved?
EDIT:
My slides are in these divs:
<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>
</div>

Use this properties
runCallbacksOnInit: true,
onInit: function(sw){}, //runs callback in initialization
onSlideChangeEnd: function(sw){} //runs callback in slide change end
Demo
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
centeredSlides: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
runCallbacksOnInit: true,
onInit: function(sw){
var offer = document.querySelector('#numberSlides');
offer.innerHTML = (sw.activeIndex + 1) + '/' + sw.slides.length + 'Offers';
},
onSlideChangeEnd: function(sw){
var offer = document.querySelector('#numberSlides');
offer.innerHTML = (sw.activeIndex + 1) + '/' + sw.slides.length + 'Offers';
}
});
#numberSlides{
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
}
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://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/js/swiper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/css/swiper.css">
<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 swiper-pagination-clickable"></div>
<div id="numberSlides">
0/0 Offers
</div>
</div>

100% swiper API solution (Works with loop true -or- false & more than one swiper on a page).
If you want to use your own elements.
Instead of using your own Logic/Calculation total-slides - clean solution is to get the total number of slides beforeInit (Before dupluaction of slides).
a.Current slide
Use realIndex + 1 (Beacuse this is zero base index => 0 == first slide) and upadte the counter on slideChange by innerHTML property.
slideChange: function(){
var currentSlide = this.realIndex + 1;
document.querySelector('.current-slide').innerHTML = currentSlide;
},
b. Total slides
beforeInit - Event will be fired right before initialization (Before swiper duplicate slides)
https://swiperjs.com/swiper-api#event-beforeInit
swiper.wrapperEl - vanilla HTMLElementelement with slider wrapper HTML element.
Than querySelectorAll (Vanilla js) this(swiper.wrapperEl) swiper-slide length property.
on: {
beforeInit: function () {
let numOfSlides = this.wrapperEl.querySelectorAll(".swiper-slide").length;
console.log(numOfSlides);
}
snippet
var swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
/* events */
on: {
slideChange: function(){
var currentSlide = this.realIndex + 1;
console.log("currentSlide is:" + currentSlide);
document.querySelector('.current-slide').innerHTML = currentSlide;
},
beforeInit: function(){
let numOfSlides = this.wrapperEl.querySelectorAll(".swiper-slide").length;
document.querySelector('.total-slides').innerHTML = numOfSlides;
}
}
});
html, body {
position: relative;
height: 100%;
}
.counter{
border: 3px solid red;
text-align: center;
}
strong{
color: red;
font-size: 32px;
}
.swiper-container {
width: 100%;
height: 100px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
on: {
beforeInit: function () {
let numOfSlides = this.wrapperEl.querySelectorAll(".swiper-slide").length;
console.log(numOfSlides);
},
<link rel="stylesheet" href="https://unpkg.com/swiper#6.3.4/swiper-bundle.min.css">
<p class="counter">
<strong class="current-slide">current-slide</strong>
of
<strong class="total-slides">Total</strong>
<p>
<!-- 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 class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper#6.3.4/swiper-bundle.min.js"></script>
type: fraction
https://swiperjs.com/api/#pagination
Swiper also has type: fraction pagination:
pagination: {
el: '.swiper-pagination',
type: "fraction"
},
And renderFraction for example:
var swiper = new Swiper('.swiper-container', {
//...
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' +
' of ' +
'<span class="' + totalClass + '"></span>';
}
});

iDangerous swipe not functioning

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

Categories