Creating different settings for multiple carousels in ng-repeat

[mshoperi]

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?

[dineshchinnasamy13]

I have the same issue ,I want to populate multiple carousel for displaying the products. But the carousel controls not working properly. There is any way to fix that like by giving unique id's to every populated carousel.