Question

我正在尝试使用按钮来浏览幻灯片，但它不起作用。到目前为止我已经这样做了：

HTML：

frame = cvQueryFrame(capture);

JS：

  <ion-slide-box>
    <ion-slide>
        <button ng-click="slide()">Next</button>
    </ion-slide>
    <ion-slide>
        This is the next slide
    </ion-slide>
  </ion-slide-box>

它显示日志“点击”，但我不知道滑块本身有什么问题。

我真的可以使用帮助。

Answer 1

我为你做了一个小演示

Plunker

<强> HTML

<div class="button-bar">
    <a ng-repeat="button in buttons" ng-class="{'active': $index === current}" ng-click="slide($index)" class="button button-stable">{{ button.name }}</a>
</div>
<ion-slide-box on-slide-changed="slideHasChanged($index)" slide-interval="1000" does-continue="true">
    <ion-slide>
        <div class="box" style="text-align:center;">
            First slide
        </div>
    </ion-slide>
    <ion-slide>
        <ion-slide>
            <div class="box" style="text-align:center;">
                Second slide
            </div>
        </ion-slide>
    </ion-slide>
</ion-slide-box>

<强>位指示

 $scope.buttons = [{
     name: '1'
 }, {
     name: '2'
 }];

 $scope.slide = function($index) {
     $scope.current = $index;
     $ionicSlideBoxDelegate.slide($index);
 }

如果您需要任何其他功能。请告诉我？

Answer 2

有点迟到，但我一直在努力使用这个组件。您也可以直接调用滑块方法，初始化时，只需将滑块对象存储在控制器中，然后使用它： HTML：

        <ion-slides
            options="ctrl.slideOptions"
            slider="ctrl.slider"
            style="margin: -13px 0 0; height: 19.1em;">
            <ion-slide-page
                ng-repeat="b in ctrl.slideCollection"
                ng-click="transCtrl.selectSlide(b)">
                <!-- slide content here -->
            </ion-slide-page>
            <div class="swiper-button-next icon ion-chevron-right" ng-click="ctrl.slideNext($event)"></div>
            <div class="swiper-button-prev icon ion-chevron-left" ng-click="ctrl.slidePrev($event)"></div>
        </ion-slides>

和JS：

ctrl.slideOptions = {
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: false,
    effect: 'coverflow',
    coverflow: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : false
    }
};

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
    // data.slider is the instance of Swiper
    ctrl.slider = data.slider;
    ctrl.activeIndex = 0;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
    console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
    // note: the indexes are 0-based
    ctrl.activeIndex = data.slider.activeIndex;
    ctrl.previousIndex = data.slider.previousIndex;
});
ctrl.slideNext = function($event) {
    ctrl.slider.onClickNext($event);
}
ctrl.slidePrev = function($event) {
    ctrl.slider.onClickPrev($event);
}

ng-click部分并不总是必要的，但是如果事情没有按预期工作，那么有一个解决方法很好。

我也对CSS按钮进行了调整：

.swiper-button-next, .swiper-button-prev {
    background: none;
}

如果你喜欢Ionic图标比swiper图标更好（丑陋的蓝色插入符号......）

，请使用它

离子滑动盒使用按钮而不是刷卡

3 个答案: