Angular-carousel is not showing / not working

Question

When I use the angular-carousel directives, the content is not showing:

 <ul rn-carousel rn-carousel-controls rn-carousel-index="carouselIndex" rn-carousel-buffered >
    <li ng-repeat="slide in slides track by slide.id" >
      <div class="text-center main-hiw-description">
        <img class="img-circle img-hiw" src="{{slide.image}}" alt="logo" />
        <h4>{{slide.title}}</h4>
        <p>
          {{slide.description}}
        </p>
      </div>
    </li>
  </ul>

Link

@NagaSaiA you have to add the css rule first. – Hetdev Jul 14 '16 at 20:18 — Hetdev, Jul 14 '16 at 20:18

Hetdev · Answer 1 · 2016-08-10T16:46:39.823

To display the content you have to add a ccs height and width:

ul {
    height:300px;
    width: 600px;
    background:blue;
}

Most of the examples contain that css rule at the begging:

Or you can add a ccs rule to adjust the height to the content(personally I recommend this option):

ul[rn-carousel] {
  > li {
    position: relative;
    margin-left: -100%;
    &:first-child {
      margin-left: 0;
    }
  }
}

Angular-carousel is not showing / not working

1 Answers1