Hi there
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 my HTML is structured like this:
<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>
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 page 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