Javascript 使用按钮代替滑动的离子滑动盒

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

HTML:

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

---

我真的需要帮助。

我为你做了一个小演示

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>

---

如果您需要任何附加功能，请告诉我？

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

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

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

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

---

如果你更喜欢Ionic图标而不是swiper图标（难看的蓝色插入符号…

你真的只有一张幻灯片吗？也许可以尝试设置一个手柄id

，然后在控制器中：

$ionicSlideBoxDelegate.$getByHandle（'test'）。next（） $scope.buttons = [{
     name: '1'
 }, {
     name: '2'
 }];

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

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

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

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