Ion-slide v1.2.4 not working

ionic-v1
1

I am attempting to get this new ion-slide working…

For some reason or another the slides does not show up.

Is there a known issue with ion-slide used within the new v1.2.4?

Still searching on the ionic’s github for this issue.

For the record, this seemingly works ok under jsfiddle https://jsfiddle.net/t0mm13b/tqhajoqo/12/

I have deployed it on both Android (which was awfully slow) and is blank on iOS.

Can anyone shed some light on this?

2

After much investigating… and playing with http://codepen.io/t0mm13b/pen/GZpmVG that its a slider’s style issue, the height has to be explicitly specified in pixels, giving it a percentage of some kind throws it off completely. Also, have discovered its not centering properly in landscape on a tablet, nor does it honour the client’s inner width either.

All in all, this iDangerous swiper component is very buggy and does not play nicely at all.

Any chance this could be fixed up?

3

Hey there

So slides are meant to take the full page by default, but can be controller by css if you want a different size.

4

Does this work inside of a side menu navigation? Because I always get a height of 0px. If I toss a specified pixel height on the container, the swiper shows up, but I really don’t want to do that as my slides will be different heights. Also, placing a min-height on the container doesn’t do anything.

5

It’s due to ion-content being on the out side.

If you use the ion-content in each slide-page, all works as expected.

6

Huh, well now I feel dumb. Thanks for the correction.

7

cool, thanks for that :slightly_smiling:

How can the slides be customised by css in respect to ionic’s styling?

PS: When will the documents for the ion-slides be available on ionic’s site, as its very sparse, and relying on the external idangerous site for the api info is bit scattered.

8

I agree with t0mm13b, the docs are quite bad. For something new to the feature set, sure okay. But, mhartington can you explain why ionic has chosen to say the other one will be deprecated in the next release? Surely it’s not responsible to deprecate something when the replacement does not yet have good docs, or at least have several examples to show how it can replace the old/do better than it.

Also, your say they are meant to be full height, can you suggest an alternative to use with an image carousel for example, which is not full page? I’m happy to change to something else till these docs get sorted, but it’s crucial to this project to implement a image carousel that will actually work with good docs/support. Just please, if you can suggest an alternative that will work with ionic and angular and hybrid apps, it would mean a lot. Or if that’s not possible, please tell me what to look out for that won’t work/play well with ionic, and I’ll do my own research on an option. Can we just use the slider direct from iDangerous perhaps.

If you can give some clarity on these points that would be appreciated.

2 Likes
9

So for the docs, you could always send a PR if you would like speed up the process :grin:

For a non-full-page slider, you can just set some css to adjust the hight to what you need to to be

http://codepen.io/mhartington/pen/NNRJJz

The old slide box implementation has not been fully depreciated yet, since there’s still some work that needs to be done.

10

I would gladly contribute to that if I first knew how to use it myself, that’s the main problem. Can’t write the docs if I can’t even get our basic image carousel working.

I’ll have a look at your code pen and see what where we can get to. Thanks!

11

Basically, the slides take an option property and we can pass any options the swiper.js API has.

So in this example

I have an options object

  $scope.options = {
    loop: false,
    effect: 'cube',
    speed: 1000,
  }

That gets passed here

 <ion-slides options="options">
        <ion-slide-page>
          <img class="cover" src="http://dpr-1448.kxcdn.com/assets/project-media/GeorgiaWorldCongressCenter-Main3.jpg" alt="">
        </ion-slide-page>
        <ion-slide-page>
          <img class="cover" src="http://www.gwcc.com/img/slide/1.jpg" alt="">
        </ion-slide-page>
        <ion-slide-page>
          <img class="cover" src="http://www.levyrestaurants.com/images/georgia-world-convention-center/highlight.jpg" alt="">
        </ion-slide-page>
      </ion-slides>
2 Likes
12

Thanks mhartington, we seem to be making some headway now thanks to your codepen. At the very least the images / text are now updating properly rather than going over each other. Next for us will be adding in the arrows. Will keep you updated.

Just to explain our issues, reading around, there was all sorts of advice about adding the following, which now does not seem necessary?

OLD CODE:

    $scope.data = {};
    // $scope.$watch('data.slider', function(nv, ov) {
    $scope.$watch('data.slider', function() {
      $scope.slider = $scope.data.slider;
    });
    
    /*
    setTimeout(function() {
      $ionicSlideBoxDelegate.slide(0);
      $ionicSlideBoxDelegate.update();
      $scope.$apply();
    });
    */
    /*
    vm.imageSlider.data = {};
    $scope.$watch('vm.imageSlider.data.slider', function(nv, ov) {
      vm.imageSlider.slider = vm.imageSlider.data.slider;
    })
    */
1 Like
13

Thanks mate, you helped me out.

14

If someone is stuck like me after going through everything here, check your ionic version. I had v1.1.0, and this does not work with 1.1.0. Upgraded to 1.3.1 and worked like a charm

15

Yes… and it seems like it’s not working with 1.3.1 anymore (with the latest nightly update). This is so buggy, damn.