JoshDSommer / nativescript-slides

A NativeScript plugin that is for Intro Tutorials, Image Carousels or any other slide functionality
Other
70 stars 32 forks source link

Troubles getting it to run #57

Closed jbhawes closed 8 years ago

jbhawes commented 8 years ago

Hello,

I am having some troubles getting nativescript-slides to run. I've installed the plugin with tns add plugin nativescript-slides. You can see it listed in the plugins: image

My page XML looks pretty simple:

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="loaded" navigatedTo="onNavigatedTo">
    <GridLayout rows="* auto">
        <Slides.SlideContainer id="slides" pageIndicators="true" start="onStart" cancelled="onCanceled" changed="onChanged" finished="onFinished">
          <Slides.Slide class="slide-1">
              <Label text="Slide 1" textWrap="true" style="width:100%"/>

          </Slides.Slide>
          <Slides.Slide>
              <Label text="Slide 2" textWrap="true" style="width:100%"/>

          </Slides.Slide>
          <Slides.Slide>
              <Label text="Slide 3" textWrap="true" style="width:100%"/>

          </Slides.Slide>
       </Slides.SlideContainer>
    </GridLayout>

</Page>

As does the javascript file:

var slides = require("nativescript-slides/nativescript-slides");

function onNavigatingTo(args) {
    var page = args.object;
    // page.bindingContext = createViewModel();
}

exports.loaded = onNavigatingTo;

However this is the screen result: image

What am I doing wrong?

Thanks! James

JoshDSommer commented 8 years ago

Hi @jbhawes the problem is the <Slides.Slides> anytime you import a plugin your markup should look like namespace + : +pluginComponent. I've updated your code below and it should work. good luck :)

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="loaded" navigatedTo="onNavigatedTo">
    <GridLayout rows="* auto">
        <Slides:SlideContainer id="slides" pageIndicators="true" start="onStart" cancelled="onCanceled" changed="onChanged" finished="onFinished">
          <Slides:Slide class="slide-1">
              <Label text="Slide 1" textWrap="true" style="width:100%"/>

          </Slides:Slide>
          <Slides:Slide>
              <Label text="Slide 2" textWrap="true" style="width:100%"/>

          </Slides:Slide>
          <Slides:Slide>
              <Label text="Slide 3" textWrap="true" style="width:100%"/>

          </Slides:Slide>
       </Slides:SlideContainer>
    </GridLayout>

</Page>
jbhawes commented 8 years ago

That did it! I guess it's been a long day, I should have seen it!

JoshDSommer commented 8 years ago

No worries, we've all been there. cheers!