Ionic slide box - basic example?

ionic-v1
1

I’m very confused about the slide boxes now. I’ve had them working before, but I’m mostly migrated to Ionic 2 so coming back to implement slideboxes in an older v1 project is proving… challenging.

I’m trying a test with the html from the docs:

<ion-content scroll="false">
  <ion-slides  options="options" slider="data.slider">
    <ion-slide-page>
      <div class="box blue"><h1>BLUE</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box yellow"><h1>YELLOW</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box pink"><h1>PINK</h1></div>
    </ion-slide-page>
  </ion-slides>
</ion-content>

And added this to my controller.js:

angular.module('algorithms.controllers', [])

.controller('AlgCtrl', function($scope, $ionicModal, $ionicPopover, $ionicSlideBoxDelegate) {

As you can see - I’m using modals and popovers already.

Finally I’ve added this code to controller.js, after my modal and popover code:


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

$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
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

I know what it’s supposed to look like but I just get the three div boxes stacked on top of each other. I can scroll down and up, but there is no swipe.

What have I done wrong?

2

Whats your slider options?
The direction should be horizontal

3

This is Ionic v1 - there doesn’t seem to be any direction option and I haven’t seen one in any of the examples.

4

You can take reference from here

5

You can refer bellow link

6

This is far too complex.

I just want a simple slide between 4 pages.

7

Did you take a look at the Codepen @thesourav posted? That isn’t very complex and sounds exactly like what you are trying to achieve.

Based on your initial post, my guess is you aren’t applying any styles to the slides, so they aren’t “stacking” correctly. I’d recommend setting the width and height of the slidebox and the containing slides.

8

I went with a different method.