Slick slider appendarrows не работает

Multiple sliders makes a problem with the navigation #2179

Comments

quantafire commented Mar 4, 2016

I am using the Slick jQuery carousel and I have a problem whenever I use the «appendArrows» option:

You see, I need to output multiple carousels and yet the number of carousels I display is also the number of times the appendArrows function seems to run inside each carousel.

Weather

Sports

So let’s say I have 3 carousels displaying (as above), whenever I display the page, it returns me 3 buttons like this in EACH carousel:

Any ideas on how I can alter the original jQuery call to play nice with 3 carousels? I was thinking how I could get the appendArrows option to display only the BEGINNING of a class name then I could run a simple PHP loop to add numerical values to each of them, but I’m afraid my jQuery isn’t that up to scratch.

Unless you have a better idea?

The text was updated successfully, but these errors were encountered:

leggomuhgreggo commented Mar 7, 2016

Hey @quantafire can you recreate in a reduced test case like a jsfiddle or codepen? See the contribution guidelines. Thanks

Closing pending test case

ActionScripted commented Sep 12, 2016

@quantafire: I’ve been working around this issue by using a loop and passing selector context to appendArrows and appendDots :

It looks like the arrows/dots append calls don’t scope things to the current carousel so if you pass a general selector like appendArrows: ‘.slider__arrows’ it’ll append to all instances of .slider__arrows on the page and you’ll see what you’ve reported.

It might make sense to scope selectors to within the parent carousel to make things more intuitive to folks trying to implement and customize the carousel.

transbetacism commented May 6, 2017

jmelendev commented Oct 20, 2017

Late to the conversation but for anyone else looking for answers, This worked for me:

I had to add the arrows and dots into the slide for this particular design.

projer-zz commented Apr 12, 2018

@jmelendev thanks for this solution. You can even simplify it like this:

Sisanu commented Dec 3, 2018 •

Not all the slick configurations are appending the navigation as a child element of the carousel, some are appending this as a sibling of the slides wrapper (for styling purpose perhaps). In this case, you have to target the element differently.

sadig2 commented Mar 30, 2020

@quantafire: I’ve been working around this issue by using a loop and passing selector context to appendArrows and appendDots :

It looks like the arrows/dots append calls don’t scope things to the current carousel so if you pass a general selector like appendArrows: ‘.slider__arrows’ it’ll append to all instances of .slider__arrows on the page and you’ll see what you’ve reported.

It might make sense to scope selectors to within the parent carousel to make things more intuitive to folks trying to implement and customize the carousel.

Thank you so much man

CrazyNoodl commented Apr 22, 2021 •

@quantafire: I’ve been working around this issue by using a loop and passing selector context to appendArrows and appendDots :

It looks like the arrows/dots append calls don’t scope things to the current carousel so if you pass a general selector like appendArrows: ‘.slider__arrows’ it’ll append to all instances of .slider__arrows on the page and you’ll see what you’ve reported.

It might make sense to scope selectors to within the parent carousel to make things more intuitive to folks trying to implement and customize the carousel.

Источник