UI Điều khiển bootstrap uib-carousel với các nút tùy chỉnh

Question

Tôi đang cố gắng điều khiển băng chuyền thông qua các nút, thay vì các nút điều khiển phía trên băng chuyền (tôi sẽ ẩn các biểu tượng chữ V).

tôi kiểm tra vào biểu tượng chữ V và thấy điều này trong nguồn:

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

Tôi đã thử thêm các thuộc tính (ngoại trừ lớp) để nút, nhưng nó không hoạt động:

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

• Tôi đoán nó không hoạt động bởi vì nút không nằm trong phạm vi uib-carousel, do đó, nó không biết chức năng 'prev()' và 'isPrevDisabled()' là gì. Tôi có thể tham chiếu đến chức năng này hay tạo chức năng của riêng tôi để kiểm soát nó không?

Plnkr Demo

Một điều mà tôi nhận thấy, nhưng nó là off-topic, là nếu bạn kích đúp vào một trong hai bên phải hoặc nút chữ V bên trái (giả sử ở bên phải), nó chỉ đi một slide to bên phải. Và sau đó nếu tôi nhấp vào chữ V bên trái, nó di chuyển sang phải một lần và sau đó di chuyển sang trái (khi bạn bấm trái chevron lần thứ 2). Bất kỳ cách nào để giải quyết vấn đề này? Nó sẽ di chuyển 2 trang chiếu khi nhấp đúp hoặc loại bỏ lần nhấp thứ hai và khi nhấp vào hướng ngược lại, hãy thực hiện hành động đó đúng cách.

Answer 1

Heres một giải pháp CSS để thao tác các "nút mũi tên" xuống vị trí của các nút của bạn. Đã xóa gradient nền và đặt các nút của bạn bên trong các nút mũi tên.

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

Cách tốt nhất để làm điều này là sử dụng thuộc tính url mẫu và xác định các điều khiển băng chuyền của riêng bạn theo cách đó. Tôi đã làm điều đó cho dự án của tôi (mặc dù tôi bị mắc kẹt khi nhận nút Tiếp theo cũng sẽ kích hoạt một sự kiện tùy chỉnh trong bộ điều khiển của tôi).

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

và mẫu của tôi được định nghĩa như vậy (trong cùng một tập tin 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

Tôi chạy vào cùng một vấn đề, đã phải tạo ra một chỉ thị tùy chỉnh.

.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; 
       }; 
      }); 
     } 
    }; 
}]); 

Đây cũng là hoạt động PLUNKR. Chỉ thị hỗ trợ dưới 4 chức năng, chức năng gọi đơn giản sử dụng ng-click bên trong chỉ thị carousel-controls.

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