nativescript-slides

NativeScript Slides for iOS and Android

###The plugin formally known as nativescript-intro-slides

###Intro slides example:

###Image carousel example:

videos by Brad Martin

##Example Usage: ###XML

	<Slides:SlideContainer>
		<Slides:Slide class="slide-1">
			<Label text="This is Panel 1"  />
		</Slides:Slide>
		<Slides:Slide class="slide-2">
			<Label text="This is Panel 2"  />
		</Slides:Slide>
		<Slides:Slide class="slide-3">
			<Label text="This is Panel 3"  />
		</Slides:Slide>
		<Slides:Slide class="slide-4">
			<Label text="This is Panel 4"  />
		</Slides:Slide>
		<Slides:Slide class="slide-5">
			<Label text="This is Panel 5"  />
		</Slides:Slide>
	</Slides:SlideContainer>

###CSS

.slide-1{
  background-color: darkslateblue;
}

.slide-2{
  background-color: darkcyan;
}
.slide-3{
  background-color: darkgreen;
}

.slide-4{
  background-color: darkgoldenrod;
}
.slide-5{
  background-color: darkslategray;
}
Label{
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
}

Great for Intros/Tutorials to Image Carousels.

To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"

when using the intro slide plugin you need at least two <Slides:Slide> views inside of the <Slides:SlideContainer>.

add as many <Slides:Slide> as you want.

the SlideContainer class also has public nextSlide and previousSlide functions so you can add your own previous and next buttons as needed.

the <Slides:SlideContainer> element also has a property called loop which is a boolean value and if set to true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.

the <Slides:SlideContainer> element also has a property called velocityScrolling which is a boolean value and if set to true will calculate transitions speeds based on the finger movement speed.

the <Slides:SlideContainer> element also has a property called interval which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call page.getViewById("your_id").stopSlideshow() to unregister it (your_id is the id given to <Slides:SlideContainer>), it can be restarted with startSlidShow.

Android Optional Attributes

• androidTranslucentStatusBar: boolean - If true, the Android status bar will be translucent on devices that support it. (Android sdk >= 19).
• androidTranslucentNavBar: boolean - If true, the Android navigation bar will be translucent on devices that support it. (Android sdk >= 19).

###Plugin Development Work Flow:

• Clone repository to your machine.
• Run npm run setup to prepare the demo project
• Build with npm run build
• Run and deploy to your device or emulator with npm run demo.android or npm run demo.ios

###Known issues

• There apears to be a bug with the loop resulting in bad transitions going right to left.

Smoother panning on Android (For {N} v2.0.0 and below only).

To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here

/node_modules/tns-core-modules/ui/gestures/gestures.android.js

and change

    CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
        var count = event.getPointerCount();
        var res = { x: 0, y: 0 };
        for (var i = 0; i < count; i++) {
            res.x += event.getX(i);
            res.y += event.getY(i);
        }
        res.x /= (count * this.density);
        res.y /= (count * this.density);
        return res;
    };

to

  CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
        var count = event.getPointerCount();
        var res = { x: 0, y: 0 };
        for (var i = 0; i < count; i++) {
            res.x += event.getRawX();
            res.y += event.getRawY();
        }
        res.x /= (count * this.density);
        res.y /= (count * this.density);
        return res;
    };

please note this will change the panning gesture for your entire project.

###Thanks to these awesome contributors!

Brad Martin

Obsessive Inc/Abhijith Reddy

Victor Nascimento

And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here: https://github.com/NathanWalker/nativescript-plugin-seed

##License

MIT

for {N} version 2.0.0+