Slick: What is the best way to implement multiple sliders with custom styles in a single page app?

[alexduan]

Have PageA with CarouselA that overrides a number of slick styles (slick-slider, slick-list, etc.)

PageB with CarouselB also overrides a number of slick styles.

What's the best way to actually have those styles applied without conflicting with each other?

[simeydotme]

this is a pretty general web-dev question, not a issue with the slider :)
thanks for contributing, and please read https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown for hints on how you can contribute further! :)

Try this:

Javacsript

  $(".carouselA").slick({});
  $(".carouselB").slick({});

Styles

/* Carousel A */
  .carouselA.slick-slider { }
  .carouselA.slick-slider .slick-list { }
  .carouselA.slick-slider .slick-slide { }
/* Carousel B */
  .carouselB.slick-slider { }
  .carouselB.slick-slider .slick-list { }
  .carouselB.slick-slider .slick-slide { }

or if you're using SCSS

Styles

/* Carousel A */
  .carouselA {
    > .slick-slider { }
    > .slick-list { }
    > .slick-slide { } 
}
/* Carousel B */
  .carouselB {
    > .slick-slider { }
    > .slick-list { }
    > .slick-slide { } 
}

Best of luck :wink: ,
Simon.

[ivan-vilches]

Check this hope help, when are multiples instances take the advantage of $(this) .
http://jsfiddle.net/81t4pkfa/2/