title: angular-ui-carousel just showing next and previous buttons. No slider or images
body: <p>I am using angular-ui-carousel as mentioned in <a href="https://www.npmjs.com/package/angular-ui-carousel" rel="nofollow noreferrer">https://www.npmjs.com/package/angular-ui-carousel</a>. However when I code it up it just shows the previous and next buttons. Can anyone please suggest what I have done wrong. I am also open to other ways of creating multi-item carousel. Please help as I am stuck!</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
  
         &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
       &lt;link rel = "stylesheet"
           href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.css"&gt;
       &lt;link rel = "stylesheet"
           href = "/BookBox/assets/libs/angular-ui-carousel/dist/ui-carousel.css"&gt;
        &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"&gt;&lt;/script&gt;
        &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"&gt;&lt;/script&gt;
        &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"&gt;&lt;/script&gt;
        &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"&gt;&lt;/script&gt;
        &lt;script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"&gt;&lt;/script&gt;
        &lt;script src="/BookBox/assets/libs/angular-ui-carousel/dist/ui-carousel.js"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
         &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
         &lt;script src="/BookBox/components/anonymousHomePage/anonymousHomePageService.js"&gt;&lt;/script&gt;
         &lt;script src="/BookBox/components/anonymousHomePage/anonymousHomePageController.js"&gt;&lt;/script&gt;
         &lt;script src="/BookBox/shared/searchBox/searchBoxService.js"&gt;&lt;/script&gt;
        &lt;script src="/BookBox/shared/searchBox/searchBoxController.js"&gt;&lt;/script&gt;
        &lt;style&gt;
  
        &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body ng-app="anonymousHomePageCtrl" ng-controller="anonymousHomeCtrl as ctrl"&gt;
  
        &lt;div style="width: 500px; margin: 0 auto;"&gt;
         &lt;ui-carousel 
         slides="ctrl.popularBooks"
         slides-to-show="4"
         slides-to-scroll="1"
         initial-slide="1"
         autoplay="false"
         dots="false"&gt;
  
    &lt;carousel-item&gt;
      &lt;a href="#" &gt;
       &lt;img alt="category1" ng-src="{{item.localImageUrl}}" height="200" width="100"&gt;
       &lt;div class='d-flex justify-content-center'&gt;
           &lt;span&gt;{{item.title}}&lt;/span&gt;
       &lt;/div&gt;
       &lt;div class='d-flex justify-content-center'&gt;
           &lt;span&gt;{{item.author}}&lt;/span&gt;
       &lt;/div&gt;
     &lt;/a&gt;
    &lt;/carousel-item&gt;
  &lt;/ui-carousel&gt;
  &lt;/div&gt;         
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Array in my angular controller:</p>
  
  <pre><code>self.popularBooks=[{title:"A Brief Hstory of Time", author:"Stephen Hawking", localImageUrl:"http://localhost:8383/BookBox/assets/img/bookCovers/I1.jpg"},
                           {title:"Life In Motion", author:"Misty Copeland", localImageUrl:"http://localhost:8383/BookBox/assets/img/bookCovers/I2.jpg"},
                           {title:"Loosing My Virginity", author:"Richard Branson", localImageUrl:"http://localhost:8383/BookBox/assets/img/bookCovers/I3.jpg"},
                           {title:"Wings Of Fire", author:"APJ Abdul Kalam", localImageUrl:"http://localhost:8383/BookBox/assets/img/bookCovers/I4.jpg"},
                           {title:"Thinking Fast and Slow", author:"Daniel Kahnamen", localImageUrl:"http://localhost:8383/BookBox/assets/img/bookCovers/I5.jpg"}];
  </code></pre>