multiple items per slide in bootstrap carousel angularjs

Question

I am new in angular js and i am trying to write a simple Carousel example with multiple items but right now i have only one item per slide. i wrote in angular 1 with coffescript with jade according to the documentation in https://angular-ui.github.io/bootstrap/#/carousel i have no idea how to implement with multiple slides. would be grateful if someone help me here is my code

getBanners = () ->
RequestService.post('banners/listing').then (result) ->
  vm.banners = result.docs
  for n in vm.banners
      newWidth = 600 + slides.length + 1
      slides.push
        image: n.file
        text: n.link
        id: currIndex++
return

assignNewIndexesToSlides = (indexes) ->
    i = 0
    1 = slides.length
    while i < l
      slides[i].id = indexes.pop()
      i++
    return


  generateIndexesArray = ->
    indexes = []
    i = 0
    while i < currIndex
      indexes[i] = i
      ++i
    shuffle indexes

  shuffle = (array) ->
    tmp = undefined
    current = undefined
    top = array.length
    if top
      while --top
        current = Math.floor(Math.random() * (top + 1))
        tmp = array[current]
        array[current] = array[top]
        array[top] = tmp
    array

  vm.myInterval = 5000
  vm.noWrapSlides = false
  vm.active = 0
  slides = vm.slides = []
  currIndex = 0

  vm.randomize = ->
    indexes = generateIndexesArray()
    assignNewIndexesToSlides indexes
    return


  getBanners()

  return

and here is page written in jade file

.row
        .container
          div(style='height: 100%')
            div(uib-carousel='', active='home.active', interval='home.myInterval', no-wrap='home.noWrapSlides')
              div(uib-slide='',ng-repeat='banner in home.slides track by banner.id', index='banner.id')
                a(href="{{banner.text}}")
                  img(src='{{home.api}}{{banner.image}}', style='margin:auto; height: 305px') 

Answer 1

It can be a little late but there are some great examples from https://www.npmjs.com/package/angular-ui-carousel for single/multiple items from angularjs. A good example without many dependencies can be found on https://mihnsen.github.io/ui-carousel/ .

<div>
<ui-carousel slides="ctrl.multiple.slides" slides-to-show="3" slides-to-scroll="3" dots="true">
  <carousel-item>
    <h3>{{ item + 1 }}</h3>
  </carousel-item>
</ui-carousel>
</div>