bootstrap carousel angularjs中每张幻灯片的多个项目

Question

我是 Angular js 的新手，我正在尝试编写一个包含多个项目的简单轮播示例，但现在我每张幻灯片只有一个项目。根据文档中的文档，我在 angular 1 中使用带有翡翠的咖啡脚本编写 https://angular-ui.github.io/bootstrap/#/carousel 我不知道如何使用多张幻灯片来实现。如果有人帮助我，将不胜感激 这是我的代码

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

这是用jade文件写的页面

.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

可能有点晚了，但https://www.npmjs.com/package/angular-ui-carousel 提供了一些很好的例子，用于 angularjs 的单个/多个项目。 在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>