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) {
Related
I have two slider on one page. The first slider works fine, but on the second one the thumbs do not work, they are not active and do not move with the main slider.
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
var swiper3 = new Swiper(".mySwiper3", {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var swiper4 = new Swiper(".mySwiper4", {
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
</script>
Hello everyone, I'm trying, without much success, to reproduce this slider to skip 3 images at once, what I achieved here was to jump from 1 to 1 using SWIPER, a JS script to skip the slider, but I imagine there is an easier way to do it using the
Example of the code I'm using:
var swiper = new Swiper(".slide-content", {
slidesPerView: 3,
spaceBetween: 25,
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,
},
},
});
You need to add slidesPerGroup attribute
slidesPerGroup="3"
codesandbox example
Add the
slidesPerGroup: 3
to your existing config and it should work
see an example here
add slidesPerGroup : 3
read the docs here SwiperJs SlidesPerGroup
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>
I have an .image-slider__fraction block that I tried to set up to display the number of the active slide from the total number of slides, but for some reason in the javascript it gives me the error "Uncaught ReferenceError: myImageSLider is not defined", but I don't understand why
Site http://ilyin1ib.beget.tech/
Code https://jsfiddle.net/qav8z7f3/
let mySliderAllSlides = document.querySelector('.image-slider__total');
let mySliderCurrentSlide = document.querySelector('.image-slider__current');
mySliderAllSlides.innerHTML = myImageSLider.slides.length;
myImageSLider.on('slideChange', function() {
let currentSlide = ++myImageSLider.realIndex;
mySliderCurrentSlide.innerHTML = currentSlide;
});
<div class="image-slider__fraction">
<div class="image-slider__current">1</div>
<div class="image-slider__sepparator">/</div>
<div class="image-slider__total">1</div>
</div>
You can achieve it like this. https://jsfiddle.net/zoymLphf/
Use swiper API methods. Counting the total number of slides is kinda tricky when you use loop mode, maybe there is a more elegant solution for this.
const swiper = new Swiper('.image-slider', {
// Optional parameters
slidesPerView: 3,
on: {
init: function(sw) {
$('.image-slider__total').text($('.swiper-slide:not(.swiper-slide-duplicate)').length)
$('.image-slider__current').text(sw.realIndex + 1)
},
slideChange: function (sw) {
$('.image-slider__current').text(sw.realIndex + 1)
},
},
spaceBetween: 30,
direction: 'horizontal',
centeredSlides: true,
loop: true,
loopedSLides: 3,
simulateTouch: true,
grabCursor: true,
speed: 800,
pagination: {
el: '.swiper-pagination',
type: 'progressbar'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 1000,
}
});
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,
},