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

Answer 1

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:

• http://www.ceus-now.com/rn-carousel-not-showing-image-on-screen/
• http://jsfiddle.net/3QBEE/
• http://plnkr.co/edit/VruPSSkVK47YgeUwYO7l?p=preview

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