ion-slides/ion-slide-page directives not rendering properly

Question

I'm trying to implement the ion-slides/ion-slide-page directives into a page on an Ionic App (using an Ionic 1 codebase) I'm currently creating but I can't get each individual ion-slide-page directive to sit horizontally next to each other (with only the currently active page displaying - as per the animated GIF example here: http://ionicframework.com/docs/api/directive/ionSlides/ )

My controller is structured like so:

 .controller('ProductsController', function($scope, $ionicSlideBoxDelegate, ManageAppDatabase, ) { ManageAppDatabase.retrieveProductsFromDatabaseTable(function(numRecords) { $scope.products = numRecords; $scope.options = { direction: 'horizontal', loop: true, effect: fade, speed: 500 } $scope.data = {}; $scope.$watch('data.slider', function(nv, ov) { $scope.slider = $scope.data.slider; }); }); } 

And the HTML for the associated view is structured like this:

 <ion-view title="Products"> <ion-content> <div class="carousel-container"> <ion-slides options="options" slider="data.slider"> <ion-slide-page class="carousel-slide" ng-repeat="product in products"> <img src="{{ product.image }}"> <h1>{{ product.title }}</h1> <small>{{ product.date }}</small> <div class="product-summary" ng-bind-html="product.summary | renderHTMLCorrectly"></div> </ion-slide-page> </ion-slides> </div> </ion-content> </ion-view> 

The CSS (shown as Sass below) used in the above is:

 .carousel-container { background: #e6e6e6; } .carousel-slide { padding:2.5% !important; img { display: block; width: 100%; background: rgb(68, 68, 68); margin: 0; } h1 { padding: 0; } small { display: block; padding: 0 0 1em 0; font-size: 0.85em; } p { padding: 0 0 1.5em 0; font-size:0.9em; line-height:1.3em; } span { display: block; text-align:center; color:rgb(255, 255, 255); font-size: 0.75em; } } 

The HTML view template always loads with EVERY ion-slide-page sat underneath the other, no matter what I do.

Can anyone tell me what I'm missing/doing wrong here? Have spent the last couple of hours trying to get to the bottom of this and I can't make any progress whatsoever.

When I run ionic info at the command line this is what I get:

Cordova CLI: Not installed Gulp version: CLI version 1.2.1 Gulp local:
Ionic Version: 1.3.0 Ionic CLI Version: 1.7.14 Ionic App Lib Version: 0.7.0 ios-deploy version: Not installed ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v0.10.26 Xcode version: Xcode 7.3 Build version 7D175

Ionic seems up to date although this line: Ionic App Lib Version: 0.7.0 is always there even when I run ionic lib update or create a new ionic project. Do I need to update anything else here?

Appreciate any assistance/advice anyone can provide here as this is driving me nuts!

Kind Regards

Answer 1

I got the same problem as yours.

It seems that there something is lacking...

but it seems there is something bizarre in your code. are you sure that the provided controller works correctly?

did you mean the following instead?

 .controller('ProductsController', function($scope, $ionicSlideBoxDelegate, ManageAppDatabase, ) { ManageAppDatabase.retrieveProductsFromDatabaseTable(function(numRecords) { $scope.products = numRecords; $scope.options = { direction: 'horizontal', loop: true, effect: fade, speed: 500 } $scope.data = {}; $scope.$watch('data.slider', function(nv, ov) { $scope.slider = ov.slider; }); }); }