1

Я создал Угловое-UI Carousel, как указано в https://angular-ui.github.io/bootstrap/#/carouselИзменение изображения радиально-UI Carousel

Но дело в том, что я хочу, чтобы изменить изображение к изображениям у меня есть локально доступны в моей системе.

Итак, как я могу это достичь?

Это HTML-код моего карусельного кода.

<div ng-controller="HomeController"> 
    <div style="height: 500px"> 
     <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides"> 
      <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> 
       <img ng-src="{{slide.image}}" style="margin:auto;"> 
      </uib-slide> 
     </uib-carousel> 
    </div> 
</div> 

Это код контроллера:

angular.module('portfolioApp', ['ngAnimate','ngTouch','ui.bootstrap']) 
.controller('HomeController', ['$scope',function($scope){ 
    $scope.myInterval = 5000; 
    $scope.noWrapSlides = false; 
    $scope.active = 0; 
    var slides = $scope.slides = []; 
    var currIndex = 0; 

    $scope.addSlide = function() { 
     var newWidth = 600 + slides.length + 1; 
     slides.push({ 
      image: 'http://lorempixel.com/' + newWidth + '/480', 
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4], 
      id: currIndex++ 
     }); 
    }; 

    $scope.randomize = function() { 
     var indexes = generateIndexesArray(); 
     assignNewIndexesToSlides(indexes); 
    }; 

    for (var i = 0; i < 4; i++) { 
     $scope.addSlide(); 
    } 

    // Randomize logic below 

    function assignNewIndexesToSlides(indexes) { 
     for (var i = 0, l = slides.length; i < l; i++) { 
      slides[i].id = indexes.pop(); 
     } 
    } 

    function generateIndexesArray() { 
     var indexes = []; 
     for (var i = 0; i < currIndex; ++i) { 
      indexes[i] = i; 
     } 
     return shuffle(indexes); 
    } 

    // http://stackoverflow.com/questions/962802#962890 
    function shuffle(array) { 
     var tmp, current, top = array.length; 

     if (top) { 
      while (--top) { 
       current = Math.floor(Math.random() * (top + 1)); 
       tmp = array[current]; 
       array[current] = array[top]; 
       array[top] = tmp; 
      } 
     } 

     return array; 
    } 
}]); 
+0

Где именно находится има вы хотите показать? Являются ли они на том же компьютере, что и браузер, запускающий веб-приложение? – Paul

+0

Я хочу заменить url, и у меня есть собственные изображения в том же каталоге в каталоге моего веб-приложения. Я хочу использовать эти изображения в своей карусели. –

ответ

1

Для каждого изображения, которое вы хотите добавить, вызовите

slides.push({ image: image_filename, text: image_text, id: currIndex++ });

где image_filename это имя файла изображения и image_text является текст, который вы хотите распечатать на картинке

+0

Это сработало, спасибо большое –

+0

Я хочу добавить html-страницу, используя ng-include в слайде вместо изображения. Любая идея, как я могу нажать html-страницу в слайдах? –