Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
36
rated 0 times [  40] [ 4]  / answers: 1 / hits: 27202  / 8 Years ago, sat, march 12, 2016, 12:00:00

I'm using the this script:



    var swiper = new Swiper('.swiper', {
slidesPerView: 3,
spaceBetween: 50,
});


I would like the slidesPerView: 3 to change to slidesPerView: 2 when the screen width gets smaller then 1000px, and to slidesPerView: 1 when screen width gets smaller then 500px.



As I know nothing of javascript syntax, please help me out by writing the full code.



Thanks you for your help.



EDIT:



Thank you all for your replies.



I still can't get it to work though...



Bellow is the complete script.



What am I doing wrong???



var swiper2 = new Swiper('.swiper2', {
slidesPerView: 3,
spaceBetween: 50,
freeMode: true,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
// when window width is <= 499px
499: {
slidesPerView: 1,
spaceBetweenSlides: 30
},
// when window width is <= 999px
999: {
slidesPerView: 2,
spaceBetweenSlides: 40
}
}
});

More From » css

 Answers
15

As stated by A Wolff, check the documentation first and use the breakpoints method, something like:



var swiper = new Swiper('.swiper', {
// Default parameters
slidesPerView: 3,
spaceBetween: 50,
// Responsive breakpoints
breakpoints: {
// when window width is <= 499px
499: {
slidesPerView: 1,
spaceBetweenSlides: 50
},
// when window width is <= 999px
999: {
slidesPerView: 2,
spaceBetweenSlides: 50
}
}
});


Since it's a less than or equal to equation, just take off a pixel so once it's under 500px (aka 499px), readjust and same for 1000.



I left the spaceBetweenSlides in there for you to mess with, but if you want to just keep it at 50, feel free to remove them from the breakpoints.



Swiper API Docs



EDIT



After reviewing the site, there are a few things that need to be changed:




  • You need to call the Swiper JS file in the head of the document,
    instead of inline with both slideshows (only need to call it once,
    put it below the jQuery script tag)

  • Can't have the same class name on both slides because it will then attach the first set of rules to both sliders

  • Make sure the document is ready before manipulating the DOM, removing the script tags from by the sliders and put this in the head



Here's how I would set up the Swipers:



<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js></script>
<!-- Add this part below the jQuery script call -->
<script src=js/slideshow-swiper.min.js></script>
<script>
// Once the DOM has loaded, attach the Swiper(s)
$(function(){
var swiper_banner = new Swiper('#slideshow_banner', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true
});
var swiper_services = new Swiper('#slideshow_services', {
slidesPerView: 3,
spaceBetween: 50,
freeMode: true,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
// when window width is <= 499px
499: {
slidesPerView: 1,
spaceBetweenSlides: 30
},
// when window width is <= 999px
999: {
slidesPerView: 2,
spaceBetweenSlides: 40
}
}
});
});
</script>
<!-- Continue loading fonts, etc -->


Don't add the jQuery file in there twice, just putting it there for a reference point. Also both containers have the same ID and that's not valid HTML, so change the ID's and attach the Swipers that way. So now your containers would be something like:



<div class=swiper-container id=slideshow_banner><!-- Code --></div>
...
<div class=swiper-container id=slideshow_services><!-- Code --></div>


Once you update that, it should fix itself, however I can't test it live on your site so let me know once you've updated the code and I'll take a look.



EDIT 1.1



It seems the breakpoints method is a real 'breakpoint' in the function as it has a weird way of handling the Object that is passed and therefore gives varied results across browsers, so with the use of the onResize() method and some JS, let's fix that:



<script>
// Once the DOM has loaded, attach the Swiper(s)
$(function(){
var swiper_banner = new Swiper('#slideshow_banner', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true
});
var swiper_services = new Swiper('#slideshow_services', {
slidesPerView: 3,
spaceBetween: 50,
freeMode: true,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
// Breakpoints
$(window).on('resize', function(){
var width = $(window).width();
if(width < 1000 && width >= 500) {
swiper_services.params.slidesPerView = 2;
swiper_services.params.spaceBetween = 40;
} else if(width < 500) {
swiper_services.params.slidesPerView = 1;
swiper_services.params.spaceBetween = 30;
} else {
swiper_services.params.slidesPerView = 3;
swiper_services.params.spaceBetween = 50;
}
swiper_services.onResize();
}).resize();
});
</script>


There, that should do it. I tested that on Chrome, FF, and IE9+ and it was running fine.


[#62962] Thursday, March 10, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
devonw

Total Points: 311
Total Questions: 116
Total Answers: 111

Location: Senegal
Member since Fri, Aug 21, 2020
4 Years ago
;