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'

you can define controller property named `breakpoints` for settings stuff like `'settings': {'asNavFor': '.slider-nav'}` and include that in `{{#slick-slider responsive=breakpoints}}` .. — Ember Freak, Sep 30 '16 at 13:55
@kumkanillam but how can i refer the class in {{#slick-slider}} — Vivekraj K R, Oct 01 '16 at 04:08

score 3 · Accepted Answer · answered Oct 01 '16 at 04:55

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.

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

1 Answers1