角度スリックでカスタム幅を使用できない

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を使用しているので、それは私が疑ってる、すべての画像を表示幅に干渉して、私が間違っている可能性があります。

これまでのところ、私はこの角度のディレクティブが好きですが、独自のカスタムCSS幅を設定できるとすばらしいことになります。誰でも助けてください！あなたの助けに感謝します！

Answer 1

Htmlでは大文字と小文字が区別されないため、angleはディレクティブの属性名にダッシュを必要とします。だからvariableWidthの代わりにvariable-widthを入れてください。