Passing parameters with array in javascript

Question

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 :)

look at `$.extend` - it allows you to merge objects together, so you can have `var commonOpts = {spaceBetween: 20 ...}` and then `$.extend({}, commonOpts, swiper1Opts)` — VLAZ, Oct 27 '16 at 13:21

score 0 · Answer 1 · answered Oct 27 '16 at 13:21

0

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
]);

answered Oct 27 '16 at 13:21

Venkatesh Konatham

808
6
16

if you to use code snippet certified that works, but, maybe in your answer can be suitable to use code format. – BrTkCa Oct 27 '16 at 13:29
I have used it because i have faced a problem. Problem i have faced it because of '[' its not formatting properly so i have added in to code snippet – Venkatesh Konatham Oct 27 '16 at 13:30
Independent of the problem, if doesn't works no makes sense to use it. – BrTkCa Oct 27 '16 at 13:37

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

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

edited May 23 '17 at 12:00

Community

1
1

answered Oct 27 '16 at 13:22

Razia sultana

2,168
3
15
20

score 0 · Answer 3 · answered Oct 28 '16 at 08:38

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
));

score 0 · Answer 4 · answered Oct 28 '16 at 09:25

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)
    });
});

Passing parameters with array in javascript

4 Answers4