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

$scope.show = function(item) {
 // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
 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)">
        <p>{{item.description}}</p>
         </a>
     </ion-slide-page>
 </ion-slides>

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.

Hello,

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.

Thanks!

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 http://ionicframework.com/docs/platform-customization/dynamic-templates.html. 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(post.id)">
           <div class="image-overlay" ng-click="imageClickHandler(post.id)"></div>
           <div class="text-over-image" ng-click="imageClickHandler(post.id)">
             <h1>{{post.title.rendered}}</h1>
             <h3>{{post.categoryString}}</h3>
           </div>
        </div>
      <!-- <ion-scroll> -->
    </ion-scroll>
  <!-- </ion-content> -->
</ion-view>

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

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

.css
.bannerHeight{
height:200px;
}