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;
}
Related
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>
I am using swiper slider from here
I am trying to imitate demo-no-210 from that repository.
My code is as shown below:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/app.css">
<style>
.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;
/* width: 50px; */
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;
}
</style>
<title>xyz</title>
</head>
<body ng-app="myApp">
<ng-view></ng-view>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
loopFillGroupWithBlank: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script src="bower_components/angular/angular.js"></script>
</body>
</html>
home.html
<div>
<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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
But somehow, I could only slider image 1 and left-right arrows also do not work.
The effect that I get is as shown below:
But I want to have multiple sliders as shown here
Is there anything I am missing here?
You need to move your JavaScript down below you your html. Code below works okay but breaks the same as yours when I move the html below the JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<link rel="stylesheet" href="css/app.css">
<style>
.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;
/* width: 50px; */
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;
}
</style>
<title>xyz</title>
</head>
<body>
<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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
loopFillGroupWithBlank: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
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
}
}
});
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