javascript - Angularjs:-Slick not working for dynamic data in Bootstrap -

i trying implement slick carousel in can display images of various friends.

the issue facing when working on slick on desktop working fine, move mobile mode/mobile screen slick carousel breaks. not sure whether problem image width or size matter

the below image of issue facing:

as can see images coming 1 below other instead of default carousel.

i making api call fetch data , display result. html file:

<div class="col-xs-6 col-sm-4 col-sm-pull-4" style="border: 1px solid;height: 400px;">   <slick settings="jumboslickpanel" style="position: inherit !important;">     <img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.bewakoof.com/uploads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;">   </slick> </div> 

i have used below code stop element getting overflowed. images not loading default. if change width of screen seems work fine. have added following:

<slick class="slick_conf" settings="jumboslickpanel" ng-if="dataloaded" data="dataloaded" init-onload="false" style="position: inherit !important;">   <img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.bewakoof.com/uploads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;width: 96%;"> </slick> 

can please me out , tell me how trigger carousel?

thanks help.