AngularJS 具有多个项目且 UN 等宽的轮播

Question

我正在使用 AngularJS 构建包含多个项目的轮播：

现在，每个项目都有不同的（随机宽度），项目列表也是随机的。（从服务器获取）。当然它需要响应，这意味着 - 项目的宽度将是固定的 - 当你调整大小时它应该每个显示 more/less 个项目。对这种情况下的 AngularJS 指令有什么建议吗？感谢您的阅读，谢谢。

Answer 1

我会推荐：https://github.com/devmark/angular-slick-carousel

最后一个演示是您要的那个： https://devmark.github.io/angular-slick-carousel/#/

在您看来，需要：

<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>

您控制器中的配置：

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

加载数据后

$scope.slickConfig4Loaded = true;

AngularJS 具有多个项目且 UN 等宽的轮播

AngularJS Carousel with multiple items and UN-equal width

angularjs

carousel