Develop Reference

I am working on a project and using swiperJS to create a slider but the breakpoints are not working, your help would be very much appreciated

I am working on a project and using swiperJS to create a slider but the breakpoints are not working, your help would be very much appreciated. Everything else is working with the exception of the breakpoints......
Here is the code...
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".slider--container", {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
centerSlide: 'true',
fade: 'true',
grabCursor: 'true',
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0:{
slidesPerView: 1,
},
520:{
slidesPerView: 2,
},
950:{
slidesPerView: 3,
},
},
});
</script>

How do I get multiple swiper galleries with thumbs to work on same page

var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
loop: true,
freeMode: true,
loopedSlides: 5, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});
the problem is when i want to use more than two Swiper thumb in one page they will not link properly (galleryThumbs ,galleryTop)
and i think i know the problem is in this part:
thumbs: {
swiper: galleryThumbs,
},

Why is mySwiper is not defined but still works

I have swiperjs working except I am trying to access its methods to apply a slide centering hack. To do that I need to access its object but for some reason it tells me undefined even though the swiper works.
Swiper set is:
var mySwiper = new Swiper('#design', {
slidesPerView: 3,
spaceBetween: 30,
loop: false,
observer: true,
observeParents: true,
observeSlideChildren: true,
preventClicksPropagation: false,
centeredSlides: true,
centeredSlidesBounds: true,
centerInsufficientSlides: true,
navigation: {
nextEl: '.swiper-design #swiper-button-feature-next',
prevEl: '.swiper-design #swiper-button-feature-prev',
},
breakpoints: {
1024: {
slidesPerView: 2,
spaceBetween: 30,
},
768: {
slidesPerView: 2,
spaceBetween: 30,
},
640: {
slidesPerView: 1,
spaceBetween: 20,
},
320: {
slidesPerView: 1,
spaceBetween: 10,
}
},
on: {
init: function () {
console.log('swiper initialized');
console.log(mySwiper);
},
}
});
I am wanting to implement a hack along these lines, https://github.com/nolimits4web/swiper/issues/2081#issuecomment-296781831 so I can center swipers that have only one slide.
Any thoughts as to what is up here? Thank you.

The init function within the swiper doesn't know that variable exists.
So change
init: function () {
to
init: function (mySwiper) {

how to include smooth transition to the sliding image carousel using the java-script?

I have made an automatic sliding image carousel in my website with the the HTML, CSS & Java-Script but the transition from one image to another is not good. Please guide me what to add in the Java-Script area to make the transition smooth?
I have tried the below java-script but I also want to add the smooth transition between the images.
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

Add a by default fade effect:
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: fade,
fadeEffect: {
crossFade: true }
});
More effects and animations for your carousel are provided here.

Pause video on slide in slider.io

I'm building a video gallery using slider.io and I want that the video pauses if a user goes to next slide/video. I'm trying to use onSlideChangeStart and onSlideChangeEnd function however it is not working.
code:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 0,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
onSlideChangeStart: function (swiper) {
$('.swiper-button-next').click(function () {
$('video')[0].pause();
});
},
onSlideChangeEnd: function (swiper) {
$('.swiper-button-next').click(function () {
$('video')[0].pause();
});
}
});

onSlideChangeStart and onSlideChangeEnd you can check if any video is playing in next or prev slide then pause it.
working fiddle
onSlideChangeStart: function(swiper) {
if ($('.swiper-slide-next video')[0]) $('.swiper-slide-next video')[0].pause();
if ($('.swiper-slide-prev video')[0]) $('.swiper-slide-prev video')[0].pause();
},
onSlideChangeEnd: function(swiper) {
if ($('.swiper-slide-next video')[0]) $('.swiper-slide-next video')[0].pause();
if ($('.swiper-slide-prev video')[0]) $('.swiper-slide-prev video')[0].pause();
},

I found a solution for this by using the below method
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 0,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
onSlideChangeStart: function (swiper) {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
},
onSlideChangeEnd: function (swiper) {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
}
});