javascript - 不能将自定义宽度与 Angular-Slick 一起使用

Question

有人用过Angular-Slick吗？ ？我正在尝试使用此指令，以便我可以获得显示多个图像/卡片的轮播。一切正常，但我无法自定义图像的 CSS 宽度。我将 variableWidth 设置为 true，但什么也没有。我还删除了 slides-to-show 选项，以便 variableWidth 可以工作，但没有结果——我仍然通过 Slick 获得默认宽度。这是下面的代码:

<slick infinite="true" slides-to-show="4" slides-to-scroll="4"
       init-onload="true" data="popularCourses" variableWidth="true" arrows="true">
  <div class="homepage-course-box" ui-sref="courses.show({id: popCourse.id})" ng-repeat="popCourse in popularCourses">
    <div class="row" style="margin:0;">
      <div class="course-img"
           ui-sref="courses.show({id: popCourse.id})"
           ng-style="{'background-image':'url({{popCourse.banner_url}})'}"></div>
      <div class="author-avatar" ng-style="{'background-image':'url({{popCourse.author.avatar}})'}"></div>
    </div>
    <div class="row" style="margin:0;">
      <a ui-sref="courses.show({id: popCourse.id})" class="homepage-course-title">{{popCourse.title}}</a>
    </div>
    <div class="row homepage-course-last-row">
      <p class="author-name">{{popCourse.author.full_name}}</p>
      <p class="course-duration">{{popCourse.duration | secondsToHHMM | date: "H'H' mm'M'"}}</p>
    </div>
  </div>
  </div>
</slick>

从代码来看，我正在使用 ng-repeat 所以它会显示所有图像，我怀疑是在干扰宽度，我可能是错的。

到目前为止，我喜欢这个 Angular Directive(指令)，但如果我可以设置自己的自定义 CSS 宽度，那就太棒了。请任何人帮忙解决这个问题!我们将不胜感激您的帮助!

Answer 1

Html 不区分大小写，因此 Angular 要求在指令的属性名称中使用破折号。所以用 variable-width 代替 variableWidth。