AngularJS Carousel with multiple items and UN-equal width-CodePudding

I am using AngularJS to build a carousel with multiple items :

Now, Each item has different (random width), and also the list of the items is random. (getting it from server). Ofcourse it needs to be responsive, which means - the width of the item will be fixed - and when you resize it should display more/less items each. Any recommendations for an AngularJS directive for this scenario? Appreciate your reading, thanks.

CodePudding user response：

I'd recommend: https://github.com/devmark/angular-slick-carousel

The last demo is the one which you are asking for: https://devmark.github.io/angular-slick-carousel/#/

In your view, would need:

<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">
  <div ng-repeat="i in YOUR_IMAGES">
    <img src={i.url} style="width:{{ i.width }}px;height:100px" />
  </div>
</slick>

The configuration in your controller:

 $scope.slickConfig4 = {
  method: {},
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
};

And after loading your data

$scope.slickConfig4Loaded = true;