Slider not working when slides are added programatically on iOS (probably on Android as well)

[terreb]

The slider doesn't work for me when I add slides programatically. tns-ios: 2.1.1 tns-android:2.1.1 tns-core-modules: 2.1.0 nativescript-slides: 2.1.4 Simulator: iPhone 6 iOS 9.3

XML:

    <Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Slides="nativescript-slides" 
      loaded="onLoaded">

  <GridLayout>
      <Slides:SlideContainer id="slider" width="100%" height="100%">
          <Slides:Slide backgroundColor="red">
            <Label text="Slide 0"/>
          </Slides:Slide>
      </Slides:SlideContainer>
  </GridLayout>
</Page>

JS:

 var labelModule = require('ui/label');
 var slides = require('nativescript-slides/nativescript-slides');

function onLoaded(args) {
    var page = args.object
    var sliderContainer = page.getViewById('slider');

    for (var i = 0; i < 10; i++) { 
        var slide = new slides.Slide();
        slide.width = '100%';
        slide.height = '300';
        slide.backgroundColor = 'red';
        var label = new labelModule.Label();
        label.text = 'Slide ' + (i+1);
        slide.addChild(label);
        sliderContainer.addChild(slide)
    }
}
exports.onLoaded = onLoaded;

[terreb]

Ok, I got more info on this. This happens when I add slides inside the page loaded event function. If I do the same inside the slider loaded event function like in your example all is working. This is weird, because page loaded event is fired after all other views are loaded. sliderContainer.isLoaded=true after the page loaded event. Could you comment on why is that? Thank you.

[andreasotto]

+1 +1 +1 +1 +1

[toddanglin]

I hit this same problem. Trying to dynamically add slides after the onSlideContainerLoaded event. Would definitely be nice to have a method that would allow dynamic slide adding/removing at runtime.

In the meantime, I worked around this problem by "just in time" dynamically creating my SlideContainer from code (along with my dynamic slides). This allows me to create my slides (and slide container) at anytime and not rely on the view initialization lifecycle firing onSlideContainerLoaded. So...something like this...

let layoutPlaceHolder = page.getViewById("stacklayoutPlaceHolderForYourSlider");
let slideContainer = new slides.SlideContainer();
// Set slideContainer properties
// Dynamically create some slides and add to slideContainer
// When all slides are dynamically created and added to slideContainer, then...
layoutPlaceHolder.addChild(slideContainer);

[hairen]

layoutPlaceHolder.addChild(slideContainer);

@toddanglin The above code cannot be compiled, getting an error message - error TS2339: Property 'addChild' does not exist on type 'View'.

Did you miss other points in your above reply?

[toddanglin]

That should just be a TypeScript warning...your app should still work fine at runtime.

If you want to eliminate the warning, you just need to "type cast" the placeholder element. So, assuming you're using a StackLayout as the placeholder, you could do this:

import { StackLayout } from "ui/layouts/stack-layout";

let layoutPlaceHolder = <StackLayout>page.getViewById("stacklayoutPlaceHolderForYourSlider");

Where the import statement is at the top of your page.

[JoshDSommer]

@toddanglin thanks man