Creating different settings for multiple carousels in ng-repeat

The idea is to have multiple carousels through ng-repeat. So far this works fine - until I need to carry out beforeChange events that perform an auto-height workaround (this works great on one carousel by the way).

How can I create different settings for multiple carousels that are in an ng-repeat?

This directive gets an ID from the carousel via a slickinit attribute, then as you can see, I have slickConfig which I added to the settings attribute like this settings="slickConfig" as normal. From this you can tell that $scope.slickConfig will be the same all the time because it's not unique to a particular carousel. Then the result of this is that somewhere down there, I do the beforeChange event and in this event I do the auto-height workaround.

$scope.slickinit = function(autoheight_properties_property_id) {
  $scope.slickConfig = {
      dots: false,
      autoplay: false,
      initialSlide: 0,
      infinite: true,
      autoplaySpeed: 1000,
      prevArrow: false,
      nextArrow: false,
      event: {
         beforeChange: function (event, slick, currentSlide, nextSlide) {
              $('.slider' + autoheight_properties_property_id).animate({ height: $('.slider' + autoheight_properties_property_id).find('.slidesimg' + autoheight_properties_property_id + '.slick-active').height() }, 500);                                      
      }                           
      },          
      method: {}
  };    
};

This is the auto-height script in there: $('.slider' + autoheight_properties_property_id).animate({ height: $('.slider' + autoheight_properties_property_id).find('.slidesimg' + autoheight_properties_property_id + '.slick-active').height() }, 500);

The slider to update height has a class name with an id at the end and in the HTML it looks as follows,

                            <slick class="slider{{x.properties_property_id}}" settings="slickConfig" ng-init="slickinit(x.properties_property_id)">
                                <div class="slidesimg{{x.properties_property_id}}" ng-click="newimage(x.properties_property_id);" style="position:relative;" data-ng-if="x.properties_photo_1 != ''"><img ng-src="http://cloud10.me/clients/itsonshow/app/{{x.properties_photo_1}}" style="max-width:100%; max-height:300px;" /></div>
                                <div class="slidesimg{{x.properties_property_id}}" ng-click="newimage(x.properties_property_id);" style="position:relative;" data-ng-if="x.properties_photo_2 != ''"><img ng-src="http://cloud10.me/clients/itsonshow/app/{{x.properties_photo_2}}" style="max-width:100%; max-height:300px;" /></div>
                                <div class="slidesimg{{x.properties_property_id}}" ng-click="newimage(x.properties_property_id);" style="position:relative;" data-ng-if="x.properties_photo_3 != ''"><img ng-src="http://cloud10.me/clients/itsonshow/app/{{x.properties_photo_3}}" style="max-width:100%; max-height:300px;" /></div>
                                <div class="slidesimg{{x.properties_property_id}}" ng-click="newimage(x.properties_property_id);" style="position:relative;" data-ng-if="x.properties_photo_4 != ''"><img ng-src="http://cloud10.me/clients/itsonshow/app/{{x.properties_photo_4}}" style="max-width:100%; max-height:300px;" /></div>
                                <div class="slidesimg{{x.properties_property_id}}" ng-click="newimage(x.properties_property_id);" style="position:relative;" data-ng-if="x.properties_photo_5 != ''"><img ng-src="http://cloud10.me/clients/itsonshow/app/{{x.properties_photo_5}}" style="max-width:100%; max-height:300px;" /></div>
                            </slick>

Where the class of the carousel is slider{{x.properties_property_id}}. When I run the code, it does the auto-height on the last carousel only, which is not surprising because $scope.slickConfig gets the last carousel only. How then can one have different settings for different carousels.

What I tried Adding the setting directly in the HTML - but I was unsure of how to add events like init with their functions in the carousel element as one would do with the others like:

    <slick infinite=true slides-to-show=1>
    ...
    </slick>

Does anyone know how to achieve this?

devmark / angular-slick-carousel

Creating different settings for multiple carousels in ng-repeat #132