UIカスタムボタン付きブートストラップコントロールuib-carousel

Question

カルーセルの上にあるコントロールではなく、ボタンでカルーセルをコントロールしようとしています（シェブロンアイコンが表示されません）。

私は山形アイコンを点検し、ソースでこれを見つけた：

<a role="button" href="" class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1"> 
    <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> 
    <span class="sr-only">previous</span> 
</a> 

は私がボタンに（クラスを除く）の属性を追加しようとしたが、それは動作しません：

<button type="button" class="btn btn-default btn-block" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">Previous</button> 

• ボタンが uib-carousel内にないため、 'prev（）'と 'isPrevDisabled（）'の機能が分からないため、機能しないと推測しています。 関数を参照することはできますか、それを制御するために独自の関数を作成することはできますか？

Plnkr Demo

あなたが右または左山形ボタンのいずれかをダブルクリックした場合、私は気づいたが、それはオフトピックですもう一つは、ある（の右を言わせて）、それだけで1枚のスライドを行きます権利。左のシェブロンをクリックすると右に移動し、左に移動します（左シェブロンを2回クリックすると移動します）。この「問題」を解決する方法はありますか？ダブルクリックで2枚のスライドを移動するか、2回目のクリックを破棄し、反対方向をクリックした場合は、そのアクションを適切に実行する必要があります。

Answer 1

「矢印ボタン」をボタンの位置まで操作するCSSソリューションです。背景グラデーションを取り除き、ボタンを矢印ボタンの内側に配置しました。

a.right.carousel-control { 
    position: absolute !important; 
    top: 100%; 
    width: 385px; 
    right: 16px; 
    height: 39px; 
    z-index: 2; 
} 
a.left.carousel-control { 
    position: absolute !important; 
    top: 100%; 
    width: 385px; 
    left: 16px; 
    height: 39px; 
    z-index: 2; 
} 
.carousel-control.left, .carousel-control.right { 
    background-image: none !important; 
} 
https://plnkr.co/edit/qlh8UOfa6RFbMa5BKGR2 

Answer 2

これを行うには良い方法は、テンプレート-url属性を使用して、独自のカルーセルは、その方法を制御定義することです。私は私のプロジェクトのためだけにやったことがあります（ただし、次のボタンをクリックして私のコントローラのカスタムイベントを起動することに苦しんでいます）。私は同じ問題に遭遇した

<div class="col-xs-12 box-shadow" style="height: 50px; padding-top: 11px; background-color: #fff; z-index: 15;">Step {{ autoseq.wizardStep + 1 }} of 5</div> 
<uib-carousel template-url="/tpl.html" active="autoseq.wizardStep" no-wrap="true" on-carousel-next="autoseq.onNext()" style="height: 395px;"> 
    <uib-slide style="height: 395px; margin-top: 5px;" index="0"> 
    ...slide content.. 
    </uib-slide> 

</uib-carousel> 

と私のテンプレートが（同じHTMLファイル内）などのように定義されて

<script type="text/ng-template" id="/tpl.html"> 
<div class="carousel"> 
<div class="carousel-inner" ng-transclude></div> 
<div class="carousel-controls"> 
    <div class="carousel-control" style="display: table-cell; float: left; width: 30%;"> 
    <a role="button" href class="left chevron-left" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1"> 
     <i class="fa fa-chevron-left"></i> 
     <span style="margin-left:5px;">Back</span> 
    </a> 
    </div> 
    <div style="display: table-cell; float: left; width: 40%;"> 
    <ol class="carousel-indicators" ng-show="slides.length > 1"> 
     <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }"> 
     </li> 
    </ol> 
    </div> 
    <div class="carousel-control" style="display: table-cell; float: left; width: 30%;"> 
    <a role="button" href class="right chevron-right" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1"> 
     <span style="margin-right:5px;">Next</span> 
     <i class="fa fa-chevron-right"></i> 
    </a> 
    </div> 
</div> 
</div> 
</script> 

Answer 3

は、カスタムディレクティブを作成する必要がありました。

.directive('carouselControls', ['$timeout', function($timeout) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      $timeout(function() { 
       scope.slidesViewed = []; 
       scope.slidesRemaining = []; 
       var carouselScope = element.isolateScope(); 

       scope.goNext = function() { 
        carouselScope.next(); 
       }; 
       scope.goPrev = function() { 
        carouselScope.prev(); 
       }; 
       scope.setActiveSlide = function(number) { 
        if (number < 0 || number > carouselScope.slides.length - 1) { 
         return; 
        } 
        var direction = (scope.getActiveSlide() > number) ? 'prev' : 'next'; 
        carouselScope.select(carouselScope.slides[number], direction); 
       } 
       scope.getActiveSlide = function() { 
        var activeSlideIndex = carouselScope.slides.map(function(s) { 
         return s.slide.active; 
        }).indexOf(true); 
        console.log(activeSlideIndex); 
        return activeSlideIndex; 
       }; 
      }); 
     } 
    }; 
}]); 

PLUNKRも同様です。指令は、以下の4つの機能、ng-clickのcarousel-controls指令を使用した単純な呼び出し機能をサポートしています。応答のための

1. goNext()
2. goPrev()
3. setActiveSlide(slideIndex)
4. getActiveSlide()