Search code examples
javascriptslick.js

Selecting multiple elements for "nextArrow" in Slick slider

I'm trying to apply two separate elements to the nextArrow function in a slick slider. But I do not get it to work.

Here is the code:

 $('.slick-container').slick({
infinite: false,
edgeFriction: 0,
prevArrow: false,
nextArrow: $('.button-next') && $('.button-right'),
dots: true,
customPaging : function() {
  return '<span class="slick-dot"></span>'
} });

I thought a && or a || would work to apply the nextArrow function to both. But I assume that doesn't work?

Solution

  • You can create a concatenated JQuery response object from the two query responses or use a single query that achieves that result by CSS Selector Lists (like $('.button-next, .button-right)`). I would recommend using selector lists; it's a more straightforward/simple approach.

    && and || are boolean logic operators in JavaScript. They do not do array concatenation.