Problem rendering ion-slides component in Ionic 1

@saintsatplay wrote:

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

Posts: 2

Participants: 1

Read full topic