Ion-slides not working with ios

Hi there,

I’m having an issue with the new ion-slides. For some reason, it only seems to be working with Android. When I test the app on an iPhone with Ionic View, or even when I use ionic serve --lab the iOS part won’t work, but the Android part will. Here is my code for my controller, with my markup at the bottom. What am I doing wrong?

.controller('MenuCtrl', function($scope, menuItems, $ionicActionSheet) {
$scope.menuTypes = menuItems.all();

$ = function(item) {
 // Show the action sheet
   var hideSheet = ${
 buttons: [
   { text: 'See Map of Ingredients' },
   { text: 'Add to Order' }
 buttonClicked: function(index) {
    if (index === 0) {
        //Link to map of ingredients
    } else if (index === 1){
        //Add to order
   return true;

 <ion-slides options="options" slider="slider">
      <ion-slide-page ng-click="show(item)" class="food-image" ng-repeat="item in menuTypes" ng-style="{'background-image' : 'url({{item.image}})'}">
        <a class="item" ng-click="show(item)">

have you figured this out? i’m having the same problem.

No, I never did. I really only needed it for a hobby project, so I haven’t looked into it much more, but I’d be interested if someone figured this out.

i saw another guy put an ng-if true at their slidebox.

Hm. This didn’t work for me immediately. I don’t really understand why it would work, that’s interesting though. Thanks for posting. I’ll keep poking around on it and see if anything works.


What kind of issue do you get ? Nothing is showing ? The transition is broken ? Have you tried to debug it ? does the elements here but not visible ?

I worked with the new ion-slides tag and it worked great on android/iOS and windows 10.

hello, @rberthome i am working on <ion-slides>
slider working on android perfectly but not working on ios.
here is my code. please give me some idea so i can view ionic slider on both platform.

<ion-slides options="{autoplay:5000,effect:'fade',initialSlide:2}"> <ion-slide-page> <img src="./images/slider_img.jpg" alt=""> </ion-slide-page> <ion-slide-page> <img src="./images/imgslider_2.jpg" alt=""> </ion-slide-page> <ion-slide-page> <img src="./images/imgslider_3.jpg" alt=""> </ion-slide-page> </ion-slides>

thank you.

Has anyone found a solution to this besides ng-if=“true”? I’m having the same issue with ion-slides and I am also using images. I’ll keep working on it and post if I find anything.


Hello, @brobinsonERT, In my problem i replaced<ion-content> to <ion-pane> and applied some margin and it works on ios also… :grinning:

1 Like

worked for me! Thanks!

Great. Happy Coding!! Ionic Rocks. :sunglasses:

@thaker, thanks for letting me know. Before I saw your solution, I already began implementing a dual template solution I tried to use your solution since it would simplify my code but it was difficult to motivate to make all those formatting changes, when I was already close to a working solution. My working ios template looks like this:

<ion-view view-title="{{ logo }}">
  <!-- <ion-content id="scroller" > -->
    <ion-scroll paging="true" direction="y" overflowScroll = "false"
    style="width:100%; height:100%" on-scroll="onScroll()" class="has-header">
      <!-- <ion-scroll direction="y"> -->
        <div class="photo-ios" collection-repeat="post in posts" item-height=100% item-width=100%>
           <img id="photo-img" ng-src="{{post.featured_image_src}}" ng-click="imageClickHandler(">
           <div class="image-overlay" ng-click="imageClickHandler("></div>
           <div class="text-over-image" ng-click="imageClickHandler(">
      <!-- <ion-scroll> -->
  <!-- </ion-content> -->

I setup a css for adjust the height… this works for me.

<ion-slides class="bannerHeight" options="options" slider="slider">