Передача изображений в Angular UI Bootstrap Carousel

Я использую карусель Angular UI Bootstrap в проекте и хочу передать этому слайдеру собственные изображения. Это мой код для контроллера карусели:

.controller('CarouselCtrl', function ($scope) {
  $scope.myInterval = 2000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 1 + slides.length + 1;
    slides.push({
      image: '../img' + newWidth,
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
      ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
})

Я понимаю, что инициализируется новый массив, и функция addSlide добавляет каждое изображение в массив и выполняет итерацию по этому массиву; однако я просто хочу изменить происхождение изображений на папку изображений в проекте, и сейчас он не работает, изображения не отображаются. Папка img - это одна папка над .js-файлом с контроллером карусели. Так что я был бы очень рад любой подсказке, спасибо!


javascript angularjs angular-ui-bootstrap
person Die Webagenten    schedule 24.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите, чтобы изображения вызывались правильно, лучше всего начинать с / (вместо ../) и понимать, что они начинаются с вашего корневого веб-каталога.

Итак, правильное местоположение может быть:

slides.push({
  image: '/images/img' + newWidth,
  text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
    ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
person joshwhatk    schedule 25.03.2015