1

https://angular-ui.github.io/bootstrap/#/carousel変更イメージ角度-UIカルーセル

に与えられた。しかし事は、私は私のシステムでローカルに利用可能な画像に画像を変更したいです、私は角度-UIカルーセルを作成しました。

これをどのように達成できますか?

これはカルーセルコードの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

ここで、正確にはimaあなたは見たいと思う?それらはWebアプリケーションを実行しているブラウザと同じマシンにありますか? – Paul

+0

私はURLを置き換えたいと私は自分のWebアプリケーションのディレクトリ内の同じディレクトリに自分のイメージがあります。私はカルーセルの中でそれらの画像を使いたいです。 –

答えて

1

、image_filenameは、画像のファイル名で、image_textがある

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

を呼び出します画像上に印刷するテキスト

+0

うまくいきました –

+0

イメージの代わりにng-includeを使ってhtmlページをスライドに追加したいと思います。どのように私はスライドのHTMLページをプッシュすることができます任意のアイデア? –

関連する問題