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

Question

我试图使用一个按钮，以浏览幻灯片，但它不工作。到目前为止，我已经这样做了：

HTML：

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

联署材料：

function controllerClass($scope, $ionicSlideBoxDelegate) {
  $scope.slide = function() {
    $ionicSlideBoxDelegate.next();
    console.log("Click");
  }
}

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

我真的需要帮助。

Answer 1

我给你做了个小演示

Plunker

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

Contoller

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

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

如果你需要任何额外的feature.Please让我知道？

Answer 2

import { Component,ViewChild } from '@angular/core'; 
import { Slides } from 'ionic-angular';

@Component({ selector: 'page-calender', templateUrl: 'calender.html' }) 
export class CalenderPage {
    @ViewChild(Slides) slides: Slides;
    constructor() {}
    gotoNextSlide() { this.slides.slideNext(); }
    gotoPrevSlide() { this.slides.slidePrev(); }
}

Answer 3

有点晚了，但我已经为这个组件挣扎了一段时间。您还可以直接调用滑块方法，初始化后，只需将滑块对象存储在控制器内，然后使用它: 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>

联合来文：

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点击部分并不总是必要的，但是如果事情不能像预期的那样工作，那么找到一个解决办法是很好的。

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

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

如果你更喜欢Ionic图标，那么就使用它(丑陋的蓝色插入符号)