Question

我是angular js的新手，我试图编写一个包含多个项目的简单Carousel示例，但现在我每个幻灯片只有一个项目。我根据《 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

这是用玉文件写的页面

.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>

引导轮播中每个幻灯片有多个项目

1 个答案: