How to use "asNavFor" option in ember-cli-slick

Question

I'm trying to implement slick slider in my ember application i found this ember-cli-slick via ember observer and i have to use Slider Syncing option.in jquery its possible by using below option.but in ember how to refer the class name?

asNavFor: '.slider-nav'

Answer 1

To install ember-cli-slick, run the below command

ember install ember-cli-slick

You can provide all settings to slick-slider through arguments like the below.

{{#slick-slider slidesToShow=1 slidesToScroll=1 arrows=false fade=true asNavFor="slider-nav" class="slider-for"}}
  <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
  <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
  <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
  <div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}

I haven't tested asNavFor feature working or not. but that's how we need to provide settings to slick slider component.