CODEWITHSUNDEEP
javascriptangularjsionic-frameworkswiper.js
JLL
JLL

Reputation: 73

How does ion-slides work on ionic 1.2.4 (Or does it work for 1.2.4?)

I used the doc http://ionicframework.com/docs/nightly/api/directive/ionSlides/ and basically use the starter app template. I added the html to the template and the js part to my controller, but it gave out error ReferenceError: fade is not defined and shows nothing..

Does anyone has a working ion-slides example for 1.2.4 ionic? My assumption is that they changed something but haven't produced the doc for it yet.

Here is the code that I used, I added the js part to controller and the html to my view. 

$scope.options = {
  loop: false,
  effect: fade,
  speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
  $scope.slider = $scope.data.slider;
})

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

When going into the view I received this error:

ReferenceError: fade is not defined
at new (controllers.js:22)
at invoke (ionic.bundle.js:17762)
at Object.instantiate (ionic.bundle.js:17770)
at ionic.bundle.js:22326
at self.appendViewElement (ionic.bundle.js:56883)
at Object.switcher.render (ionic.bundle.js:54995)
at Object.switcher.init (ionic.bundle.js:54915)
at self.render (ionic.bundle.js:56743)
at self.register (ionic.bundle.js:56701)
at updateView (ionic.bundle.js:62357)

I am using the example of the nightly version and my ionic version is 1.2.4

Upvotes: 3

Views: 7037

Answers (4)

2xSamurai
2xSamurai

Reputation: 1289

ion-slides documentation gives a feeling that it is somewhat incomplete in ionic v1. To get the complete power of the new ion-slides component you need to check out the documentation from here

If you look closely at the ion-slides tag you will see something like this slider="data.slider".

data.slider is the name of the slider. You can use that with the methods mentioned in the above link to do powerful stuff. Like changing the slide index or adding a button to display the next slide.


Sample Method Usage

$scope.slider = data.slider;
$scope.slider.slideNext();

Upvotes: 0

A. Khaled
A. Khaled

Reputation: 1608

For better docs, the ion-slides in v2 is similar to v1:

https://ionicframework.com/docs/v2/api/components/slides/Slides/

Upvotes: 0

Will.Harris
Will.Harris

Reputation: 4014

What worked for me was setting the effect option to a string because what we are doing (as written and copied from their docs) is passing it a variable named fade and of course we haven't defined it which explains the error.

So change your code to

$scope.options = {
        loop: false,
        effect: 'fade',
        speed: 500
    }

And it should work.

Heres a list of other effects to try out as well :) slide or cube or coverflow

Upvotes: 8

robenghuse
robenghuse

Reputation: 11

Check out the nightly documentation: http://ionicframework.com/docs/nightly/api/directive/ionSlides/

Upvotes: 0

Related Questions