Pass multiple options to a function in javascript

Question

I have in my page two sliders which share the same options:

var options1 = {
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 310,
    itemMargin: 5
}

var options2 = {
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false
}

And then I have something like this:

$('#carousel').flexslider(options1);
$('#slider').flexslider(options2);

$('#carousel2').flexslider(options1);
$('#slider2').flexslider(options2);

The problem is I need to add to the end of the options one option that is different for each one, which is this: asNavFor: '#slider' for options1 and sync: "#carousel" for options two. I tried this but it didn't work:

$('#carousel').flexslider(options1, {asNavFor: '#slider'});
$('#slider').flexslider(options2, {sync: "#carousel"});

$('#carousel2').flexslider(options1, {asNavFor: '#slider2'});
$('#slider2').flexslider(options2, {sync: "#carousel2"});

I want to avoid repeating the options because they're the same for every slider. Thanks in advance!

You could look into Object.assign

elclanrs
– elclanrs

2016-06-19 21:00:30 +00:00
Commented Jun 19, 2016 at 21:00 — elclanrs
– elclanrs, Commented Jun 19, 2016 at 21:00

elclanrs · Accepted Answer · 2016-06-19 21:05:05Z

1

You can use Object.assign to crete a new object with your options as a template:

$('#carousel').flexslider(Object.assign({}, options1, {asNavFor: '#slider'}));
$('#slider').flexslider(Object.assign({}, options2, {sync: "#carousel"}));

$('#carousel2').flexslider(Object.assign({}, options1, {asNavFor: '#slider2'}));
$('#slider2').flexslider(Object.assign({}, options2, {sync: "#carousel2"}));

If you need to support old browsers you can use jQuery's $.extend or a polyfill instead.

answered Jun 19, 2016 at 21:05

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nick Over a year ago

Thanks for the answering, but I'll use a foor loop because there may be more than 2 galleries and I can avoid this problem!

elclanrs Over a year ago

Not sure how that plugin works but perhaps you could use a common class instead of unique ids.

Zakaria Acharki · Accepted Answer · 2016-06-19 21:14:03Z

1

You could to add the attributes to the object before passing it to the flexslider() :

options1['asNavFor'] = '#slider';
options2['sync'] = '#carousel';

$('#carousel').flexslider(options1);
$('#slider').flexslider(options2);

Then override it with new values before second call :

options1['asNavFor'] = '#slider2';
options2['sync'] = '#carousel2';

$('#carousel2').flexslider(options1);
$('#slider2').flexslider(options2);

You could use for loop like :

var nbr_elements = 3;

for(var i=1;i<nbr_elements;i++)
{
    if(i==1){
        options1['asNavFor'] = '#slider';
        options2['sync'] = '#carousel';

        $('#carousel').flexslider(options1);
        $('#slider').flexslider(options2);
    }else{
        options1['asNavFor'] = '#slider'+i;
        options2['sync'] = '#carousel'+i;

        $('#carousel'+i).flexslider(options1);
        $('#slider'+i).flexslider(options2);
    }
}

Hope this helps.

edited Jun 19, 2016 at 21:14

answered Jun 19, 2016 at 20:59

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

2 Comments

nick Over a year ago

Thanks, this worked, I figured anyways that I can make a for loop and avoid this problem completely (:

Zakaria Acharki Over a year ago

You're weclome, how much carousel/slider you have ? check my update.

wteuber · Accepted Answer · 2016-06-19 21:14:47Z

0

I'd recommend using jQuery's extend to dynamically create extended options like this:

options1Nav1 = $.extend({}, options1, {asNavFor: '#slider'});
options2Sync1 = $.extend({}, options2, {sync: '#carousel'});

options1Nav2 = $.extend({}, options1, {asNavFor: '#slider2'});
options2Sync2 = $.extend({}, options2, {sync: '#carousel2'});

and then calling

$('#carousel').flexslider(options1Nav1);
$('#slider').flexslider(options2Sync1);

$('#carousel2').flexslider(options1Nav2);
$('#slider2').flexslider(options2Sync2);

Of course you can pass the dynamically extended options directly as well.

answered Jun 19, 2016 at 21:14

wteuber

1,2489 silver badges16 bronze badges

Collectives™ on Stack Overflow

Pass multiple options to a function in javascript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related