Question

我正在尝试使用Bootstrap Carousel在移动应用程序上创建图像幻灯片，但它不起作用，我没有错误。

HTML

  <ion-content ng-controller="valuesController" style="margin-top: 25px" id="controls">

<div>
  <carousel interval="carouselTimer">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}">
      <div class="carousel-caption">
        <h4>{{slide.cap}}</h4>
      </div>
    </slide>
  </carousel>
</div>

JS

angular.module('starter.valuesController', ['ui.bootstrap'])

.controller("valuesController", function ($scope) {
  $scope.carouselTimer = 5000;
  $scope.slides = [
    {
      image: 'http://www.halston.com/files/6514/5150/2738/HH-slider-001-saleonsale-20160101.jpg',
      cap: 'Caption goes here'
    },
    {
      image: 'http://www.halston.com/files/7514/5179/4608/HH-slider-001-winterfresh-20151229-5.jpg',
      cap: 'Caption goes here'
    },
    {
      image: 'http://www.halston.com/files/6514/5150/2738/HH-slider-001-saleonsale-20160101.jpg',
      cap: 'Caption goes here'
    },
    {
      image: 'http://www.halston.com/files/7514/5179/4608/HH-slider-001-winterfresh-20151229-5.jpg',
      cap: 'Caption goes here'
    }
  ];
});

在我的索引文件中，我确保包括：

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

图像显示在另一个下面..谁能告诉我我做错了什么？谢谢

AngularJs Bootstrap轮播不起作用

0 个答案: