CODEWITHSUNDEEP
javascripthtmlionic-framework
NSaa
NSaa

Reputation: 27

Ion-slide-box using button instead of swiping

I am trying to use a button in order to navigate through the slides however it does not work. I have done this so far:

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>

JS:

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

It shows the log "Click" but I don't know what is wrong with the slider itself.

I could really use help.

Upvotes: 2

Views: 4045

Answers (3)

Raam Meena
Raam Meena

Reputation: 29

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

Upvotes: 1

JSantaCL
JSantaCL

Reputation: 560

Kind of a late answer, but I've been struggling with this component for a while. You can also call the slider methods directly, when initialized, just store the slider object inside your controller and then use it: The 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>

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

The ng-click part is not always necessary, but if things do not work as expected it's nice to have a workaround.

I also have a tweak for the CSS buttons:

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

Use it if you like Ionic icons better than the swiper ones (ugly blue caret...)

Upvotes: 0

Muhsin Keloth
Muhsin Keloth

Reputation: 7954

I have made a small demo for you

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>

Contoller

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

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

If you need any additional feature.Please let me know?

Upvotes: 2

Related Questions