用戶界面引導控制烏布傳送帶自定義按鈕

Question

我想通過按鈕控制旋轉木馬，而不是旋轉木馬上方的控件（我將隱藏雪佛龍圖標）。

予檢查的V形圖標，並發現這在源：

<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

，我注意到另一件事，卻是題外話，就是如果你雙擊右側或左側V形按鈕（讓我們說正確的），那就只一個幻燈片正確的。然後如果我點擊左邊的V形符號，它會向右移動一次，然後移動到左邊（第二次單擊左側V形符號時）。任何方式來解決這個'問題'？它應該在雙擊時移動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

更好的方法是使用template-url屬性並以這種方式定義自己的旋轉木馬控件。我已經爲我的項目完成了這項工作（儘管我陷入了讓Next按鈕同時在我的控制器中觸發自定義事件）。

<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()