appendDots and appendArrows support

[jessepinuelas]

Any plan on supporting where the arrows and dots get appended to?

[leo6104]

You can pass slick's configuration 'appendDots', 'appendArrows' config via @Input() config: any; in ngx-slick-carousel component.

slideConfig = {
   appendDots: jQuery(elem),
   appendArrows: jQuery(elem)
};

<ngx-slick-carousel [config]="slideConfig"></ngx-slick-carousel>

Is there any other thoughts on these support way?

[jessepinuelas]

@leo6104 I tried that for example:

In template

In TS @Input() config: any; slideConfig = { 'slidesToShow': 1, 'slidesToScroll': 1, 'infinite': false, 'dots': true, 'appendDots': $('.carousel-controls') }

The dots never get appended to the element I specify in the config.

[leo6104]

@jessepinuelas Sorry for late comment. I guess $('.carousel-controls') not binding to real element DOM because the @Input() config variable defined before ngAfterViewInit.

Did you try this.config.appendDots = $('.carousel-controls'); in ngAfterViewInit or ngOnInit ?

[leo6104]

@jessepinuelas There is a problem with dynamic [config] input. (If slideConfig variable changed after initializing slick, the new config doesn't work) So i fix it in 0.4.2 release.

If you still have the problem on 0.4.2 release, please comment. Thanks.

[abdelrahmanYossef]

@leo6104 I tried that for example:

In template

In TS @input() config: any; slideConfig = { 'slidesToShow': 1, 'slidesToScroll': 1, 'infinite': false, 'dots': true, 'appendDots': $('.carousel-controls') }

The dots never get appended to the element I specify in the config.

i faced this problem too, i couldn't customize on the slider , i couldn't find the methods and function syntaxes that make me able to control the slider. i tried your code but it made error
where should i put this .. @input() config: any; ..??

[rishabh0211]

I'm having the same problem. Unable to append the arrows to the slick. Config slideConfig = { slidesToShow: 4, slidesToScroll: 1, nextArrow: $('.next'), prevArrow: $('.prev') }; TEMPLATE

And this is not working. Help! Thanks in advance!

[abdelrahmanYossef]

Finally, i found the solution. @rishabh0211 @jessepinuelas You can use all the slick Settings, Events and Methods which existed in the slick official web site http://kenwheeler.github.io/slick/ , follow the next steps:

First for using settings like dots and auto play etc.. put it as a property in the slideConfig object in Ts file like that: slideConfig = { "slidesToShow": 1, 'dots': true, 'method': {} };

Note, if you want to change the style of dots i didn't find any way except change the slick.css itself located in the node_modules. i changed every thing i want matching my design.

And you can use the slick events in the method property in slideConfig object, but actually i didn't need it till now. So i don't know the exact syntax.

last part if you want to use the methods of the slick slider like slickNext or slickPrev which allow you to make your own arrow and put it any where, put it in the html file in (click function) and write slickModal before the method name like this syntax has highlight

Note: if you had install any version of slick like ngx-slick you should uninstall it and every thing related of slick. you can follow the migration steps located in the repository bottom.

i hope you find it well and all of that working perfectly with me.