I have several instances of slider, and I need to pass the same parameters to every one.
I assume that I need array for that, but since I'm newbie in JS, I'm unsure how to do it properly.
Parameters looks for example like this:
spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
600: {
slidesPerView: 2
},
991: {
slidesPerView: 3
},
1200: {
slidesPerView: 4
}
}
and slider instance:
var swiper1 = new Swiper('.swiper1', {
prevButton: '.b-prev-1',
nextButton: '.b-next-1',
//here I need to get the rest of the parameters
});
Thank you :)
Hi you can write like below
var swiper1 = new Swiper('.swiper1', [
prevButton: '.b-prev-1',
nextButton: '.b-next-1',
//here I need to get the rest of the parameters
]);
Try it
function(arrayP){
for(var i = 0; i < arrayP.length; i++){
alert(arrayP[i]); //no .value here
}
}
link:-Passing an array as parameter in JavaScript
You can use jQuery's $.extend() :
var extraDetails = {
spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
600: {
slidesPerView: 2
},
991: {
slidesPerView: 3
},
1200: {
slidesPerView: 4
}
}
};
var swiper1 = new Swiper('.swiper1', $.extend({
prevButton: '.b-prev-1',
nextButton: '.b-next-1'
},
extraDetails
));
The most eloquent way of doing this in ES5 is to create a new config object for each slide, but base it off of a common object using $.extend. (Object.assign() is similar in VanillaJS)
var commonConfig = { spaceBetween: 20, slidesPerView: 5, breakPoints: { ... } };
var swiper1 = $.extend(true, {}, commonConfig, {
prevButton: '.b-prev-1',
nextButton: '.b-next-1'
});
var swiper2 = $.extend(true, {}, commonConfig, {
prevButton: '.b-prev-2',
nextButton: '.b-next-2'
});
It'd be cool to see more code -- I imagine you could loop over your DOM elements and create the config on-the-fly for each one. Something like:
$('.swiper').each(function(idx, el){
$(this).swiper({
spaceBetween: 20,
slidesPerView: 5,
breakPoints: { ... },
prevButton: '.b-prev-'+(idx+1),
nextButton: '.b-next-'+(idx+1)
});
});
Related
Swiper 5.4.5 thumbs gallery multiple instances not working in the same page swiper version 5.4.5
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,
},
});
/**
* Multiple Swiper Slides
* #require Swiper v4.X
* #author palash chandra
* #author website palashchandra.xyz
*/
const multipleSwiperSlides = function() {
let sliderMain = document.querySelectorAll('.swiper-container.js-slider--main')
let sliderNav = document.querySelectorAll('.swiper-container.js-slider--nav')
let mainArray = [];
let navArray = [];
// Slider Main
sliderMain.forEach(function(element, i) {
// Push swiper instance to array
mainArray.push(
new Swiper(element, {
loop: true,
loopedSlides: 3,
})
);
});
// Slider Nav
sliderNav.forEach(function(element, i) {
var self = sliderNav;
// Push swiper instance to array
navArray.push(
new Swiper(element, {
slidesPerView: 3,
loop: true,
loopedSlides: 3,
slideToClickedSlide: true,
spaceBetween: 5,
navigation: {
nextEl: self[i].querySelector('.swiper-button-next'),
prevEl: self[i].querySelector('.swiper-button-prev')
}
})
);
});
const checkOnPage = function() {
if (sliderMain.length > 0 && sliderNav.length > 0) {
let numberOfSlides = mainArray.length || navArray.length || 0;
if (mainArray.length !== navArray.length) {
console.warn('multipleSwiperSlides: Number of main slides and nav slides is different. Expect incorrect behaviour.');
}
for (let i = 0; i < numberOfSlides; i++) {
mainArray[i].controller.control = navArray[i];
navArray[i].controller.control = mainArray[i];
}
console.log('multipleSwiperSlides: Things should be working fine. B)');
}
}
checkOnPage();
}
multipleSwiperSlides();
How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoplay() and .startAutoplay() function but not worked for me.
This is my output : click here
And here is the js code :
<script>
var slider = new Swiper ('#slider', {
slidesPerView: 1,
autoplay: 1000,
spaceBetween: 0,
loop: true,
loopedSlides: 6,
centeredSlides : true,
　disableOnInteraction: true,
autoplayDisableOnInteraction: false,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: '1.3',
breakpoints: {
600: {
slidesPerView: 1
}
}
});
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loopedSlides: 6,
loop: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true,
breakpoints: {
600: {
slidesPerView: 3
}
}
});
slider.params.control = thumbs;
thumbs.params.control = slider;
$("#slider").mouseenter(function() {
slider.autoplay.stop();
});
$("#slider").mouseleave(function() {
slider.autoplay.start();
});
$("#thumbs").mouseenter(function() {
thumbs.autoplay.stop();
});
$("#thumbs").mouseleave(function() {
thumbs.autoplay.start();
});
</script>
Try to use $el element returned from instance. It works fine.
slider.$el.on('mouseover', () => {
slider.autoplay.stop();
});
slider.$el.on('mouseleave', () => {
slider.autoplay.start();
});
Check this example:
https://codepen.io/keitoliveira/pen/XWKdXMr
I'm working with the Swiper Carousel which allows for the option of a scrollbar. I can pass a string that signifies the scrollbar element but if I try to pass an object as per the docs here, I get an error: Cannot read property 'offsetWidth' of undefined name: TypeError
I've tracked this to the set method here where e.track should be an object where each key is a number and the value should be the element (scrollbar):
Again this works if I set the scrollbar option to a string, but not an object as per the docs. Has anyone seen this before/have any ideas how to get past it? Code below:
This version does not work:
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: {
el:'.swiper-scrollbar',
snapOnRelease:true,
draggable:true,
hide: false
},
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
This version does (but I cannot add the extra arguments - e.g. draggable & hide):
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: '.swiper-scrollbar',
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
EDIT: As a follow up, I'm not entirely sure which version of Swiper my client is using, but playing around on https://jsfiddle.net/ makes me think they have an outdated version. I've asked them to update and will close this if that is the case
swiper one
var swiperCurrent;
var swiper = new Swiper('.swiper-container-1', {
init: false,
pagination: '.swiper-pagination-1',
nextButton: '.swiper-button-next-1',
prevButton: '.swiper-button-prev-1',
slidesPerView: 3,
centeredSlides: true,
paginationClickable: true,
initialSlide: 2,
spaceBetween: 22,
breakpoints: {
992: {
slidesPerView: 1,
spaceBetween: 10
}
},
runCallbacksOnInit:true
});
function showSliderContent2(idx) {
$('._ooredoo_banner_content_1> div').hide(0);
$('._ooredoo_banner_content_1> div:eq('+ idx +')').fadeIn(200)
}
swiper.on('init', function (el) {
showSliderContent(el.activeIndex);
});
swiper.on('transitionEnd', function (el) {
if(swiperCurrent !== el.activeIndex){
showSliderContent(el.activeIndex);
swiperCurrent = el.activeIndex;
}
});
swiper.init();
swiper two
var swiperCurrent2;
var swiper = new Swiper('.swiper-container-2, {
init: false,
pagination: '.swiper-pagination-2',
nextButton: '.swiper-button-next-2',
prevButton: '.swiper-button-prev-2',
slidesPerView: 3,
centeredSlides: true,
paginationClickable: true,
initialSlide: 2,
spaceBetween: 22,
breakpoints: {
992: {
slidesPerView: 1,
spaceBetween: 10
}
},
runCallbacksOnInit:true
});
function showSliderContent2(idx) {
$('._ooredoo_banner_content_2> div').hide(0);
$('._ooredoo_banner_content_2> div:eq('+ idx +')').fadeIn(200)
}
swiper.on('init', function (el) {
showSliderContent2(el.activeIndex);
});
swiper.on('transitionEnd', function (el) {
if(swiperCurrent2 !== el.activeIndex){
showSliderContent2(el.activeIndex);
swiperCurrent2 = el.activeIndex;
}
});
swiper.init();
swiper three
var swiperCurrent3;
var swiper = new Swiper('.swiper-container-3’, {
init: false,
pagination: '.swiper-pagination-3',
nextButton: '.swiper-button-next-3',
prevButton: '.swiper-button-prev-3',
slidesPerView: 3,
centeredSlides: true,
paginationClickable: true,
initialSlide: 2,
spaceBetween: 22,
breakpoints: {
992: {
slidesPerView: 1,
spaceBetween: 10
}
},
runCallbacksOnInit:true
});
function showSliderContent3(idx) {
$('._ooredoo_banner_content_3> div').hide(0);
$('._ooredoo_banner_content_3> div:eq('+ idx +')').fadeIn(200)
}
swiper.on('init', function (el) {
showSliderContent3(el.activeIndex);
});
swiper.on('transitionEnd', function (el) {
if(swiperCurrent3 !== el.activeIndex){
showSliderContent3(el.activeIndex);
swiperCurrent3 = el.activeIndex;
}
});
swiper.init();
Something like the following (untested) code might help: All I did was to factor out the common code into a reusable function and use template strings to fill in the missing parts, then map that function over the 1, 2, and 3 partial ids. This means we no longer need the 2 and 3 suffixes on some of the variables; they are only available inside the closures generated by the callback to map.
There are likely bugs in this, either reusing something I shouldn't or the reverse: making something dynamic that doesn't have to be. In the first case, if you can continue to use the id to distinguish it, great. If not, you might need one ore more additional variables, and the map statement will have to get a little more complex.
const makeSwiper = (id) => {
var swiperCurrent;
var swiper = new Swiper('.swiper-container-2', {
init: false,
pagination: `.swiper-pagination-${id}`,
nextButton: `.swiper-button-next-${id}`,
prevButton: `.swiper-button-prev-${id}`,
slidesPerView: 3,
centeredSlides: true,
paginationClickable: true,
initialSlide: 2,
spaceBetween: 22,
breakpoints: {
992: {
slidesPerView: 1,
spaceBetween: 10
}
},
runCallbacksOnInit:true
});
function showSliderContent(idx) {
$(`._ooredoo_banner_content_${id}> div`).hide(0);
$(`._ooredoo_banner_content_${id}> div:eq(${idx})`).fadeIn(200)
}
swiper.on('init', function (el) {
showSliderContent(el.activeIndex);
});
swiper.on('transitionEnd', function (el) {
if(swiperCurrent !== el.activeIndex){
showSliderContent(el.activeIndex);
swiperCurrent = el.activeIndex;
}
});
return swiper
}
const swipers = [1, 2, 3].map(makeSwiper)
I am playing around with swiper and I was wondering, is there a way to match activeIndexes of two different swipers?
The idea is to have two swipers on the page displaying images and when you slide one, other follows.
I have tried with swiper1.params.control = swiper2, but that is not really working because swiper1 has three slides per view and swiper2 has only one, so they don't really sync.
So, I started playing around with mySwiper.activeIndex but something is not working.
I am using http://idangero.us/swiper/, version swiper#3.4.2
Here is my code
const swiper1 = new Swiper(swiper-one-container, {
speed: 500,
spaceBetween: 20,
prevButton: '.left-arrow',
nextButton: '.right-arrow',
slidesPerView: 3,
loop: false,
});
const swiper2 = new Swiper(swiper-two-container, {
speed: 500,
spaceBetween: 250,
prevButton: '.left-arrow',
nextButton: '.right-arrow',
slidesPerView: 'auto',
loop: false,
centeredSlides: true,
});
swiper1.slideTo(swiper2.activeIndex);
console.log(swiper1.activeIndex);
console.log(swiper2.activeIndex);