Currently, I am working on an Ionic App (using an Ionic 1 codebase) and trying to incorporate the ion-slides/ion-slide-page directives into a page. However, I am facing difficulty in getting each individual ion-slide-page directive to sit horizontally next to each other as shown in the animated GIF example at http://ionicframework.com/docs/api/directive/ionSlides/.
This is how my controller looks:
.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;
});
});
}Here is the HTML structure for the associated view:
<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 (Sass) used in the above code snippet 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;
}
}Despite all efforts, the HTML view template loads with every ion-slide-page stacked underneath one another. Could someone please guide me on what I might be missing or doing wrong? Any help would be greatly appreciated.
When I run ionic info in the command line, I receive the following output:
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
Although Ionic seems up to date, the line Ionic App Lib Version: 0.7.0 remains unchanged even after running ionic lib update or creating a new ionic project. Is there something else that needs updating?
Your insights and advice would be invaluable in helping me resolve this issue promptly. Thank you!
Sincerely,