joshdsommer / nativescript-slides

A NativeScript plugin that is for Intro Tutorials, Image Carousels or any other slide functionality

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 id="slides" pageIndicators="true">
			<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.

Methods for SlideContainer

• nextSlide() - navigate to the next slide (right direction)
• previousSlide() - navigate to the previous slide (left direction)
• goToSlide(index) : - goes to the slide at the specified index

Attributes for SlideContainer

• loop : boolean - If 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.

• disablePan : boolean - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.

• pagerOffset : string - Margin-top for the pager. Number or percentage, default 88%.

• pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.

• **slideWidth: number - set the width of your slides. (Only currently works on android).

Indicators

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

.slide-indicator-inactive {
  background-color: #fff;
  opacity: 0.4;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

.slide-indicator-active {
  background-color: #fff;
  opacity: 0.9;
  width: 10;
  height: 10;
  margin-left: 2.5;
  margin-right: 2.5;
  margin-top: 0;
  border-radius: 5;
}

Events

• start - Start pan
• changed - Transition complete
• cancelled - User didn't complete the transition, or at start\end with no slides
• finished - Last slide has come into view

Angular 2 compatibility

I've started working on a Angular 2 version they can be checked out here: Angular 2 version of slides

If you want to use this plugin with Angular 2 the registerElement from nativescript-angular you will want to set the SlideContainer's property of angular to true. Then in your angular component in the ngAfterViewInit. you will want to have an instance of your slide container to call the function constructView(). Follow the example

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 appears to be a bug with the loop resulting in bad transitions going right to left.
• Currently in Android there is an known issue when a slide component inside of a scroll view.

How To: Load slides dynamically

You want to hook into the loaded event of the view and then create your view elements.

Demo Code

<Slides:SlideContainer loaded="onSlideContainerLoaded"

import * as slides from 'nativescript-slides/nativescript-slides';

export function onSlideContainerLoaded(args) {
  let slideContainer = <slides.SlideContainer>args.object;

  //Construct the slides
  slideContainer.addChild(getSlide('Page 1', 'slide-1'));
  slideContainer.addChild(getSlide('Page 2', 'slide-2'));
  slideContainer.addChild(getSlide('Page 3', 'slide-3'));
  slideContainer.addChild(getSlide('Page 4', 'slide-4'));
  slideContainer.addChild(getSlide('Page 5', 'slide-5'));
}

function getSlide(labelText: string, className: string) {
  let slide = new slides.Slide();
  slide.className = className;
  let label = new labelModule.Label();
  label.text = labelText;
  slide.addChild(label);

  return slide;
}

Thanks to these awesome contributors!

Brad Martin

Obsessive Inc/Abhijith Reddy

Victor Nascimento

Steve McNiven-Scott

Leo Caseiro

Todd Anglin

Andrew Lo

Raúl Uranga

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

Contributing guidelines

Contributing guidelines

License

MIT

for {N} version 2.0.0+

nativescript-slides's Issues

Feature Request: A way to override slide animations

It would be great to be able to override the default slide animation. For instance, like providing animation options just like "ui/frame" allows to fade, flip, curlUp etc... I was only able to hack the currentPanel to fadeOut before calling nextSlide but the next slide still "slides in"; would like a different animation for that.

Panning doesn't work for "tappable" elements on Android

Hi!

I'm making a full screen, tappable image slides. Everything works well on iOS, but on Android, panning on tappable slides doesn't work.

<Slides:SlideContainer id="slides" hasNext="true" hasPrevious="true"> <Slides:Slide class="slide-1"> <Image src="~/images/fil.png" stretch="aspectFill" tap="playSound" /> </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> <DockLayout top="0" left="0" height="64" width="100%"> <Button text="<" tap="prevButton" dock="left" width="120" style.backgroundColor="white"/> <Button text=">" tap="nextButton" width="120" style.backgroundColor="white" style.horizontalAlignment="right"/> </DockLayout> </Slides:SlideContainer>

This is my example code. Am I missing something? 🤔

Thank you!

Changed event not getting triggered on manual call

Thanks for implementing events on various slide states.

Events are getting triggered properly when we swipe the slides. But if we call nextSlide or previousSlide functions manually, changed event is not getting triggered.

I think we need to emit changed event in nextSlide and previousSlide functions also.

Feature Request: Page Indicators Position

Currently page indicator is created inside footer and footer's top position is fixed to Platform.screen.mainScreen.heightDIPs - 105.

It will be very helpful, if we can have an attribute on SlideContainer, may be named pageIndicatorsPlacement which can accept input as "top" or "bottom". So if placement is "top", we can set it at top.

Also, it will be great if we can have attribute may be named pageIndicatorOffset, which accept offset value either from top or bottom and sets offset based on pageIndicatorsPlacement. So instead of using fixed 105, we can use that value.

I think this will give more customisation to users of this awesome plugin.

Intervals and timer buggy

Currently, the set interval worked but after going through the entire loop the animations start to get out of order.

also I think that if an interval is set it should automatically set the loop attr to true.

Feature request: custom slider width

Right now the slide take 100% of the screen, no matter what I set in css and without respecting the Slide Container wrapper width (please correct me if I'm wrong). I.e. if I put SlideContainer inside another view which is say 50% of the screen width, slides still take 100% width. Would be nice to have the slider to respect the width of the parent or have an option to set custom width explicitly.

Orientation bug and loop right not working properly

Orientation: line 256 // absolute_layout_1.AbsoluteLayout.setTop(_this._footer, topOffset);

Getting file not found error

I installed this plugin into my {N} project.

tns plugin add git-url

and I see it installed fine under node_modules folder - v2.0.1

Created a simple xml file and am getting follow exception when I run - test4 is the name of my project.

Error: Building UI from XML. @file:///app/main-page.xml:50:2 ���Module '/data/data/org.nativescript.test4/files/app/nativescript-slides' not found for element 'nativescript-slides:SlideContainer'. ���com.tns.NativeScriptException: Failed to find module with absolute path: "/data/data/org.nativescript.test4/files/app/nativescript-slides". com.tns.Module.resolvePathHelper(Module.java:220) com.tns.Module.resolvePath(Module.java:60)

Indicators doesn't show up

Thank you for the plugin, it's really cool.
I noticed that the page indicators disappear on my iPhone 5s.
It blinks for a sec, but after nothing.

Do you know what can be the problem?

Thanks

Plugin fails on iOS if androidTranslucentStatusBar="true"

First of all 👍 for this nice plugin.

When I set androidTranslucentStatusBar="true" on Slides:SlideContainer tag, on android it is working fine but on iOS its giving me below error:

file:///app/tns_modules/nativescript-slides/nativescript-slides.js:215:47: JS ERROR TypeError: undefined is not an object (evaluating 'app.android.startActivity'

After digging into code, If found the issue in constructView funciton at below line:
if (this.androidTranslucentStatusBar === true || this._androidTranslucentNavBar === true && app.android && Platform.device.sdkVersion >= '19') {

As || precedence is lower than &&, if androidTranslucentStatusBar is true, the condition will be true and it will try to execute android specific code on iOS and is giving error.

Changing that condition to below, it is working fine.
if(app.android && Platform.device.sdkVersion >= '19' && (this.androidTranslucentStatusBar === true || this._androidTranslucentNavBar === true ))

If it is ok, please correct it in the source code.

last slide is not showing first slide on right swipe

when loop=true i can move left from first slide to last but i cant move right from last slide to first slide.

The reason is this part of code is changed

if (this.loop) {
    slideMap[0].left = slideMap[slideMap.length - 1];
    slideMap[slideMap.length - 1].right = slideMap[0];
}

to

if (this.loop) {
    slideMap[0].left = slideMap[slideMap.length - 1];
}

Is there a reason for doing this?

Changing slides really fast seems to lose the currentPanel

Changing the slides really fast, I'm able to get the error:

Cannot read property 'right' of undefined. on line 61 of the transpiled nativescript-slides.js file. Which points to currentPanel

I haven't tried going to the previous but assuming the same event will occur.

Adding a Slide Dynamically Except loaded

Hi!

I cannot add new slides to my slide container dynamically like onTap or after a specific slide. How can I do that?

Thanks.

automatically rotate slides

I implemented the slider with a few pictures. At the moment the pictures are first static until the user decides to slide them. So I was wondering it it is possible to let the slides rotate automatically (a sort of slideShow)??

Troubles with sliding when SlideContainer is inside of ScrollView on Android

I have a special case: SlideContainer is inside vertical ScrollView. For iOS sliding works ok, but on Android it looks like the ScrollView intercepts the panning at some point and it gets pretty difficult to change the slides. Especially from left to right.

The code to test.

XML:

            <Page xmlns="http://schemas.nativescript.org/tns.xsd"
                  xmlns:Slides="nativescript-slides"
                  navigatingTo="navigatingTo">
                <ScrollView id="scrollView">
                    <Repeater id="repeater" horizontalAlignment="center" width="100%"
                              items="{{ slideGroups }}">
                        <Repeater.itemTemplate>

                            <Slides:SlideContainer loaded="onSlideContainerLoaded"
                                                   horizontalAlignment="center">
                            </Slides:SlideContainer>

                        </Repeater.itemTemplate>
                    </Repeater>
                </ScrollView>
            </Page>

TS:

main-page.ts

            import {EventData} from 'data/observable';
            import {Page} from 'ui/page';
            import {MyModel} from './main-view-model';
            import * as labelModule from 'ui/label'
            import * as slides from 'nativescript-slides/nativescript-slides'

            export function navigatingTo(args:EventData) {
                let page = <Page>args.object;
                page.bindingContext = new MyModel();
            }

            export function onSlideContainerLoaded(args) {
                let slideContainer = <slides.SlideContainer>args.object;

                //Construct the slides
                slideContainer.addChild(getSlide("Slide 1", "slide-1"));
                slideContainer.addChild(getSlide("Slide 2", "slide-2"));
                slideContainer.addChild(getSlide("Slide 3", "slide-3"));
                slideContainer.addChild(getSlide("Slide 4", "slide-4"));
                slideContainer.addChild(getSlide("Slide 5", "slide-5"));

            }

            function getSlide(labelText: string, className: string)  {
                let slide = new slides.Slide();
                slide.className = className;
                let label = new labelModule.Label();
                label.text = labelText;
                slide.addChild(label)

                return slide;
            }

main-view-model.ts

            import {Observable} from 'data/observable';
            import {ObservableArray} from 'data/observable-array';

            export class MyModel extends Observable {
                public slideGroups
                constructor() {
                    super();
                    this.slideGroups = new ObservableArray([1,2,3])
                }
            }

CSS:

            SlideContainer {
                height: 400;
            }

            .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;
                horizontal-align: center;
                vertical-align: center;
            }

I understand this is not usual usage of the slides and probably a bad practice to have them inside ScrollView, but I have an app where I need to have them like this. Thank you for any advise or insight.

Feature request: use with Reapeater

Would be awesome if sildes could be added dynamically with Repeater.

create contribution guidelines

Get on this @TheOriginalJosh

"angular2/core" Issue - Unable to get this working in a number of ways

Hi @TheOriginalJosh,

Great plugin, which works fine with static content on Angular2 - however I have not been successful in making it work on the latest angular2/core import..

Could you please have a look with the following setup:

test.ts:

import {Component, ElementRef, OnInit, ViewChild} from 'angular2/core';
import {registerElement} from "nativescript-angular/element-registry";
import {GO_API} from "../../shared/go_services/api";  // <---- I get my images through this service which works fine as tested in a standard Stack Layout

registerElement("Slide", () => require("nativescript-slides").Slide);
registerElement("SlideContainer", () => require("nativescript-slides").SlideContainer);

@Component({
    selector: 'slidedemo',
    template: `
    <SlideContainer angular="true" #slides>
        <Slide *ngFor="#img of images">
            <Image [src]="img.ExtraLarge"></Image>
        </Slide>
    </SlideContainer>
    `
})
export class SlideDemoComponent implements OnInit {

    public images: Array<any> = [];

    @ViewChild("slides") slides: ElementRef;
    constructor(private _GO_API: GO_API) {

    }
    ngOnInit() {
        this.getImages();
    }

    getImages() {
        let params = {
            product_id: 19383
        };

        this._GO_API.call_api("ProductInfoMulti", params)
            .subscribe((data) => {
                if (data && data.ProductInfo && data.ProductInfo.Media) {
                    this.images = data.ProductInfo.Media;


                    // Uncomment below if you want to test images with your own subscriber service
                    // this.images.push({
                    //  ExtraLarge : 'http://teststatic.golfonline.co.uk/media/img/tfi_2135_1_th.300x350.jpg'
                    // });                                          
                    // this.images.push({
                    //  ExtraLarge : 'http://teststatic.golfonline.co.uk/media/img/tfi_2135_1_ex2.300x350.jpg'
                    // });                      

                }
            },
            (error) => {
                console.dump(error);
            }
            );
    }

    ngAfterViewInit() {
        let SlidesXml = this.slides.nativeElement;
        SlidesXml.constructView();
    }
}

Here's my package.json

{
  "name": "test",
  "version": "1.0.0",
  "license": "test",
  "nativescript": {
    "id": "org.nativescript.test",
    "tns-ios": {
      "version": "2.0.1"
    },
    "tns-android": {
      "version": "2.0.0"
    }
  },
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "email-validator": "^1.0.4",
    "nativescript-angular": "0.0.45",
    "nativescript-cache": "^1.0.0",
    "nativescript-social-share": "^1.1.3",
    "nativescript-swiss-army-knife": "^0.1.1",
    "nativescript-telerik-ui": "^1.1.1",
    "tns-core-modules": "2.0.0"
  },
  "devDependencies": {
    "babel-traverse": "6.9.0",
    "babel-types": "6.9.1",
    "babylon": "6.8.1",
    "filewalker": "0.1.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  }
}

Slide changed eventData new/old index error

I started working with the changed event for the SlideContainer, and while debugging I noticed that the newIndex and oldIndex properties on the event's eventData property seem to be reversed when using the nextSlide method to navigate.

When navigating from the first slide to the second slide (using "nextSlide" method), the "change" event fires, and if you inspect the eventData you see:

newIndex: 0
oldIndex: 1

You should see newIndex: 1, oldIndex: 0. And this continues as you move through the slides (newIndex and oldIndex are reversed).

NOTE: This does NOT happen when swiping to navigate between slides. When swiping, the new/old indexes are CORRECT. It only seems to happen when using the nextSlide method to programmatically navigate.

Given the difference in behavior from swiping and navigating pragmatically, I assume there is just some kind of race condition.

devDependency to @next in the package.json is preventing publishing for iOS

Related to NativeScript/NativeScript#3046

when creating app with the plugin with
tns publish ios AppleUser ApplePass

the plugin is causing duplicate files to be generated in the build package.
Issue noticed when using npm 3.x and should be fixed out of the box with 2.4.0.

Meanwhile, to prevent this behaviour it would be best to update the plugin package.json not to refer to @next versions.

https://github.com/TheOriginalJosh/nativescript-slides/blob/master/package.json#L77

NullPointer exception when using Angular2

Maybe the on-load event is occurring before the slide map is built so the app crashes when using in on Angular:

    <SlideContainer>
        <Slide class="slide-1" *ngFor="let img of images">
            <Label [text]="img.title"></Label>
            <Image [src]="img.source"></Image>
        </Slide>
    </SlideContainer>

And I'm getting

TypeError: Cannot read property 'panel' of undefined
    at Object.callback (/data/data/org.nativescript.testapp/files/app/tns_modules/nativescript-slides/nativescript-slides.js:167:35)
    at SlideContainer.Observable.notify (/data/data/org.nativescript.testapp/files/app/tns_modules/data/observable/observable.js:155:23)

tns-platform-declarations should be a development dependency

tns-platform-declarations should be in devDependencies instead of dependencies.

Cannot read property 'length' of undefined (N 2.2.0) Demo app

With NativeScript 2.2.0 the demo app is throwing error on the dynamic slides example.
I am able to reproduce this error with a bigger project as well! I thought it was a late context issue but it appears to have something to do with nativescript-dom dependency.

edit: main demo page is also throwing the same error

JS: NativeScriptError: Error: The application crashed because of an uncaught exception. You can look at "stackTrace" or "nativeException" for more detailed info
rmation about the exception.
JS:  *** StackTrace *** : com.tns.NativeScriptException:
JS: Calling js method onCreateView failed
JS:
JS: TypeError: Cannot read property 'length' of undefined
JS: File: "/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js, line: 100, column: 25
JS:
JS: StackTrace:
JS:     Frame: function:'_resync', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 100, column: 26
JS:     Frame: function:'classList', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 115, column: 14
JS:     Frame: function:'getClassList', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 184, column: 18
JS:     Frame: function:'Object.defineProperty.get', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 188, column: 1
25
JS:     Frame: function:'SlideContainer.createIndicator', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-slides/nativescript-slides.j
s', line: 520, column: 18
JS:     Frame: function:'SlideContainer.buildFooter', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-slides/nativescript-slides.js',
line: 439, column: 43
JS:     Frame: function:'', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-slides/nativescript-slides.js', line: 183, column: 43
JS:     Frame: function:'Observable.notify', file:'/data/data/org.nativescript.demo/files/app/tns_modules/data/observable/observable.js', line: 158, column: 23
JS:     Frame: function:'Observable._emit', file:'/data/data/org.nativescript.demo/files/app/tns_modules/data/observable/observable.js', line: 177, column: 18
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 611, column: 14
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
JS:     Frame: function:'eachChild', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
JS:     Frame: function:'LayoutBase._eachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146,
column: 22
JS:     Frame: function:'View._loadEachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
JS:     Frame: function:'eachChild', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
JS:     Frame: function:'ContentView._eachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/content-view/content-view.js', line: 65, c
olumn: 13
JS:     Frame: function:'Page._eachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/page/page-common.js', line: 265, column: 41
JS:     Frame: function:'View._loadEachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
JS:     Frame: function:'Page.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/page/page-common.js', line: 45, column: 35
JS:     Frame: function:'View._addViewCore', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 962, column: 18
JS:     Frame: function:'View._addViewCore', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 127, column: 39
JS:     Frame: function:'View._addView', file:
JS: '/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 952, column: 14
JS:     Frame: function:'onFragmentShown', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame.js', line: 40, column: 11
JS:     Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame.js', line: 6
12, column: 13
JS:     Frame: function:'FragmentClass.onCreateView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/fragment.js', line: 23, column: 38
JS:
JS:
JS:     at com.tns.Runtime.callJSMethodNative(Native Method)
JS:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:862)
JS:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:727)
JS:     at com.tns.Runtime.callJSMethod(Runtime.java:713)
JS:     at com.tns.Runtime.callJSMethod(Runtime.java:694)
JS:     at com.tns.Runtime.callJSMethod(Runtime.java:684)
JS:     at com.tns.FragmentClass.onCreateView(FragmentClass.java:35)
JS:     at android.app.Fragment.performCreateView(Fragment.java:2053)
JS:     at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:894)
JS:     at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1067)
JS:     at android.app.BackStackRecord.run(BackStackRecord.java:833)
JS:     at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1452)
JS:     at android.app.FragmentManagerImpl$1.run(FragmentManager.java:447)
JS:     at android.os.Handler.handleCallback(Handler.java:739)
JS:     at android.os.Handler.dispatchMessage(Handler.java:95)
JS:     at android.os.Looper.loop(Looper.java:135)
JS:     at android.app.ActivityThread.main(ActivityThread.java:5221)
JS:     at java.lang.reflect.Method.invoke(Native Method)
JS:     at java.lang.reflect.Method.invoke(Method.java:372)
JS:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
JS:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
JS:  *** nativeException *** : com.tns.NativeScriptException:
JS: Calling js method onCreateView failed
JS:
JS: TypeError: Cannot read property 'length' of undefined
JS: File: "/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js, line: 100, column: 25
JS:
JS: StackTrace:
JS:     Frame: function:'_resync', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 100, column: 26
JS:     Frame: function:'classList', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 115, column: 14
JS:     Frame: function:'getClassList', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 184, column: 18
JS:     Frame: function:'Object.defineProperty.get', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-dom/dom.js', line: 188, column: 1
25
JS:     Frame: function:'SlideContainer.createIndicator', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-slides/nativescript-slides.j
s', line: 520, column: 18
JS:     Frame: function:'SlideContainer.buildFooter', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-slides/nativescript-slides.js',
line: 439, column: 43
JS:     Frame: function:'', file:'/data/data/org.nativescript.demo/files/app/tns_modules/nativescript-slides/nativescript-slides.js', line: 183, column: 43
JS:     Frame: function:'Observable.notify', file:'/data/data/org.nativescript.demo/files/app/tns_modules/data/observable/observable.js', line: 158, column: 23
JS:     Frame: function:'Observable._emit', file:'/data/data/org.nativescript.demo/files/app/tns_modules/data/observable/observable.js', line: 177, column: 18
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 611, column: 14
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
JS:     Frame: function:'eachChild', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
JS:     Frame: function:'LayoutBase._eachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 146,
column: 22
JS:     Frame: function:'View._loadEachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
JS:     Frame: function:'eachChild', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 616, column: 23
JS:     Frame: function:'ContentView._eachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/content-view/content-view.js', line: 65, c
olumn: 13
JS:     Frame: function:'Page._eachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/page/page-common.js', line: 265, column: 41
JS:     Frame: function:'View._loadEachChildView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 619, column: 18
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 609, column: 14
JS:     Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 82, column: 35
JS:     Frame: function:'Page.onLoaded', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/page/page-common.js', line: 45, column: 35
JS:     Frame: function:'View._addViewCore', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 962, column: 18
JS:     Frame: function:'View._addViewCore', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view.js', line: 127, column: 39
JS:     Frame: function:'View._addView',
JS: file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/core/view-common.js', line: 952, column: 14
JS:     Frame: function:'onFragmentShown', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame.js', line: 40, column: 11
JS:     Frame: function:'FragmentCallbacksImplementation.onCreateView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame.js', line: 6
12, column: 13
JS:     Frame: function:'FragmentClass.onCreateView', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/fragment.js', line: 23, column: 38
JS:

Issue with sliding when used inside scroll-view

When we use this plugin with scroll-view, it is very difficult to swipe the slides.

On iOS, we can swipe the slides but alongwith that scroll-view will also scroll vertically.

On Android, if we do not swipe exact horizontally, it will not move to the next slide.

Here are the previews of issue on Android/iOS.

Preview in iOS

Preview in Android

Sample Project

I have cloned this repository and just added scroll-view related code in main-page.xml. You can find the complete project here: https://github.com/shripalsoni04/ns-slides-scrollview-issue/tree/master/demo

I think the issue is when we swipe, the scroll-view also scrolls vertical by some amount, and due to that the 'pan' gesture is getting cancelled. This results in cancellation of slide move on Android. I don't know how but I think we need to stop the propagation of touch event when deltaX is beyond some threshold, may be +- 3

It will be great if you can suggest any solution or workaround for this issue.

Bug when go back to the page with slides added dynamically

A bug occurs when we go back to the page with slides added dynamically on both iOS and Android.

In order to reproduce the issue please do the following:

• in nativescript-slides/demo/dynamic-page.ts add:

export function openPage() {
    var navigationEntry = {
        moduleName: "./views/main-page",
        animated: false
    };

    frameModule.topmost().navigate(navigationEntry);
}

• in nativescript-slides/demo/main-page.ts add:

export function goBack() {
    frameModule.topmost().goBack()
}

• in nativescript-slides/demo/main-page.xml add inside GridLayout:

<Button text="Go Back" tap="goBack" row="1" />

• in nativescript-slides/demo/dynamic-page.xml add inside GridLayout:

<Button text="open sub page" tap="openPage" row="1" />

• Run the app -> Dynamic slides -> open sub page -> go back

Please let me know if you need any further info on that.

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

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;

Strange behaviour with interval, finished event, and disablePan="true"

When I try setting the interval, interval="2000" and I have say 3 slides, then on my changed event I count the indexes and expect to see 0, 1, 2 and have the finished event handler fire... none of that seems to happen.

The app starts and the indexes log as 0,1, but I do see the slides quickly move from slide 1 - 3. When I set disablePan="false", then the indexes and slides show up correctly as 0,1,2 (1,2,3). I think the timer is buggy.

But my use case is to have the app start with an image slider, with disablePan=true, and interval=2000 then on finished event, have a ‘main' page show up

TypeError: Cannot read property 'left' of undefined

I have a problem with I try to use a repeater o when I try to create the view via code

TypeError: Cannot read property 'left' of undefined
File: "/data/data/org.nativescript.wosapp/files/app/tns_modules/nativescript-slides/nativescript-slides.js, line: 268, column: 17

StackTrace:
Frame: function:'SlideContainer.positionPanels', file:'/data/data/org.nativescript.wosapp/files/app/tns_modules/nativescript-slides/nativescript-slides.js', line: 268, column: 18
Frame: function:'', file:'/data/data/org.nativescript.wosapp/files/app/tns_modules/nativescript-slides/nativescript-slides.js', line: 197, column: 23
Frame: function:'Observable.notify', file:'/data/data/org.nativescript.wosapp/files/app/tns_modules/data/observable/observable.js', line: 158, column: 23
Frame: function:'Observable._emit', file:'/data/data/org.nativescript.wosapp/files/app/tns_modules/data/observable/observable.js', line: 177, column: 18
Frame: function:'View.onLoaded', file:'/data/data/org.nativescript.wosapp/files/app/tns_modules/ui/core/view-common.js',

Feature Request: Slide Change Event

I think currently we don't have any way to know when slide is changed. It will be very good if we have an event whenever slide is changed to satisfy scenarios like changing state of some controls, which are not inside slide, depending on active slide.

After having a quick look at code, I think we can call notifyat the end of setupPanel method like this:

private setupPanel(panel: ISlideMap) {
    ...
    this.setActivePageIndicator(this.currentPanel.index);
    this.notify({
        eventName: 'slideChanged',
        object: new Observable({currentPanel: this.currentPanel})
    });
}

What do you think?

TypeError: undefined is not a constructor (evaluating 'new viewClass()')

Hello
I am using the angular example as you said but I am facing this error:
class ListComponent - inline template:1:8 ORIGINAL EXCEPTION: TypeError: undefined is not a constructor (evaluating 'new viewClass()') ORIGINAL STACKTRACE: createAndAttach@file:///app/tns_modules/nativescript-angular/view-util.js:90:33

My code:

import {Component,ElementRef, OnInit, ViewChild} from "@angular/core";
import {registerElement} from "nativescript-angular/element-registry";
registerElement("Slide", () => require("nativescript-intro-slides").Slide);
registerElement("SlideContainer", () => require("nativescript-intro-slides").SlideContainer);

@Component({
    moduleId: module.id,
    selector: "List-page",
    template: `
        <SlideContainer angular="true" #slides>
            <Slide *ngFor="let img of images">
                <Label [text]="img.title"></Label>
            </Slide>
        </SlideContainer>
    `
})

export class ListComponent implements OnInit {
    public images: Array<any> = [];
    @ViewChild("slides") slides: ElementRef;
    ngOnInit() {
        this.images.push({title: 'Sports'});
        this.images.push({title: 'Cats'});
        this.images.push({title: 'Food'});
    }
    ngAfterViewInit() {
        let SlidesXml = this.slides.nativeElement;
        SlidesXml.constructView();
    }
}

plus I could not find the method constructView.
Thank you

changedEvent stops working after if pageIndication is not set.

Hi

I noticed while using your plugin that the changedEvent stopped working after pageIndication was set to false. I looked further into the code and discovered that there is no check if pageIndication is turned on or off before the active page indicator is being set.

I guess the fix looks something similar to this, where i just added an if in the beginning that checks the pageIndication first:

    setActivePageIndicator(index: number) {
        if (this.pageIndicators) {
            this._footer.eachLayoutChild((view: View) => {
                if (view instanceof Label) {
                    view.opacity = 0.4;
                    view.className = 'slide-indicator-inactive';
                }
            });
            let activeIndicator = this._footer.getChildAt(index);
            activeIndicator.className = 'slide-indicator-active';
            activeIndicator.opacity = 0.9;
        }
    }

BR / Lillebak

Render unnormal when slideContainer addChild async

I'm trying to add child to the slide container async way dynamically (for example,in the callback of a http request).however,the Interface become unnormal and slide container can't swipe.

To verificate this,just change the file 'dynamic-page.ts' of the demo in line 24,like
setTimeout(function() { slideContainer.addChild(getSlide("Page " + i, "slide-" + i)); }, 100);
and run.

May be use Template and bindingContext (like the Repeater and Listview) is a better way?

Thanks.

Wrong newIndex value in changed event argument on nextSlide call

When we call nextSlide or previousSlide method, and if we have attached listener to changed event, the values of newIndex and oldIndex in the event argument are coming wrong.

After looking into the code, I found that in nextSlide method, this.triggerChangeEventLeftToRight(); should be changed to this.triggerChangeEventRightToLeft();(as on nextSlide, actually the slide is moving from rightToLeft) and similar change in previousSlide method.

Android status bar isn't turning transparent, white instead.

With the new android transparent status bar i'm getting a white bar. Android Marshmellow, Nexus 5x

OutOfMemory Error doInBackground() function

HomePage.prototype.onSlideContainerLoaded = function (args) { if(!appSettings.getBoolean("is_logged")) { frames.topmost().navigate("pages/login/login"); } else{ var slideContainer = args.object; slideContainer.style.visibility = "collapsed"; var slides = config.slider_list; var count = 0; slides.forEach(function (slide) { slideContainer.addChild(getSlide(slide.slider_name,slide.slider_image)); count++; }); slideContainer.style.visibility = "visible"; } } function getSlide(labelText,image) { var slide = new slides.Slide(); slide.style.backgroundImage = "url('"+image+"')"; slide.style.backgroundRepeat = "no-repeat"; slide.style.backgroundPosition = "center"; slide.style.backgroundSize = "cover"; return slide; }

I am Creating my Slides Like that There is XML;

<Slides:SlideContainer loaded="onSlideContainerLoaded" height="35%" pageIndicators="true" > </Slides:SlideContainer>

And When Use this plugin i am getting this error:
java.lang.RuntimeException: An error occurred while executing doInBackground() at android.os.AsyncTask$3.done(AsyncTask.java:309) at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:354) at java.util.concurrent.FutureTask.setException(FutureTask.java:223) at java.util.concurrent.FutureTask.run(FutureTask.java:242) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588) at java.lang.Thread.run(Thread.java:818)Caused by: java.lang.OutOfMemoryError: Failed to allocate a 14745612 byte allocation with 12939040 free bytes and 12MB until OOM at dalvik.system.VMRuntime.newNonMovableArray(Native Method) at android.graphics.BitmapFactory.nativeDecodeByteArray(Native Method) at android.graphics.BitmapFactory.decodeByteArray(BitmapFactory.java:763) at org.nativescript.widgets.Async$Http$RequestResult.readResponseStream(Async.java:225) at org.nativescript.widgets.Async$Http$HttpRequestTask.doInBackground(Async.java:303) at org.nativescript.widgets.Async$Http$HttpRequestTask.doInBackground(Async.java:253) at android.os.AsyncTask$2.call(AsyncTask.java:295) at java.util.concurrent.FutureTask.run(FutureTask.java:237) ... 3 more

Why it's happening ?

Cannot set slide indicator margin-bottom greater than 40.

Slide indicator overlap after I set margin-bottom: 45. I'm trying display slide indicator to the middle of the screen. What is the possible cause of this issue?

Demo: Angular 2 + TypeScript

Update: Check the solution here

Hi @TheOriginalJosh,

Thanks for this amazing plugin.

I'm trying to setup with Angular, following your instructions, but I'm very confused. It's not really clear what steps I need to follow.

Could you please help me to build an example? That's what I have so far. Thanks:

import {Component, OnInit} from '@angular/core';
import {registerElement, ViewClass} from "nativescript-angular/element-registry";

var SlideContainer = require("nativescript-slides").SlideContainer;
SlideContainer.angular = true; // set the SlideContainer's property of angular to true
registerElement("SlideContainer", () => SlideContainer);

@Component({
    selector: 'slidedemo',
    template: `
    <SlideContainer>
        <Slide class="slide-1" *ngFor="let img of images">
            <Label [text]="img.title"></Label>
            <Image [src]="img.source"></Image>
        </Slide>
    </SlideContainer>
    `
})
export class SlideDemoComponent implements OnInit {

    public images: Array<any> = [];

    ngOnInit() {
        this.images.push(
            {
                title: 'Sports',
                source: 'http://lorempixel.com/400/200/sports/1/'
            }
        );
        this.images.push(
            {
                title: 'Cats',
                source: 'http://lorempixel.com/400/200/cats/1/'
            }
        );
        this.images.push(
            {
                title: 'Food',
                source: 'http://lorempixel.com/400/200/food/1/'
            }
        );
    }


  /** 
   * Then in your angular component in the ngAfterViewInit.
   * you will want to have an instance of your slide container to call the function constructView().
   */
    ngAfterViewInit() {
        SlideContainer.constructView();
    }
}

Indicators are not shown

I can't get page indicators to work.

<GridLayout rows="200, auto, auto, auto" cols="*, auto">
    <SlideContainer angular="true" pageIndicators="true" loop="true" #slides row="0">
        <Slide *ngFor="let img of images">
            <Image [src]="img.source" stretch="aspectFill"></Image>
        </Slide>
    </SlideContainer>
...

Any idea of what I am doing wrong?

Feature request: gotoSlide(index)

Hi

I pretty new here and I couldn't find another place to send a feature request.

I am very happy to use your plugin and we are currently using it for showing images. Currently we are navigating from a page with thumbnails, which means that the user can click a thumbnail and I navigate to the slides. It would therefor be nice to be able to open the specific image that the user clicked by using some kind of gotoSlide command.

Or maybe the existing next command could be reused and take a parameter with slide index:
slideContainer.nextSlide(slideIndex);

Have you thought about something like this before?

BR / Jens Peter

How to Programmatically add slides

At the beginning I don't have any slide in my hand all slide content comes from http request...
I need a way to create the slides on the fly... I no result from http requests I have to show not found ui for the user...

I am not using Angular... JS + xml...

How can I do this...
Thanks

Troubles getting it to run

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:

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:

What am I doing wrong?

Thanks!
James

property disablePan not applyied programmatically

i'm using nativescript ng and everything works fine except disabling/enabling the pan property on change event ,even after calling constructView()
was it meant to act like that ? is there another way ?

Slide indicator is now displayed vertically instead horizontally (2.2.2 vs 2.2.1)

Hey,

After removing platforms/ and node_modules/ folder and rebuilding our app from "scratch" I noticed that the slider indicator is now no longer displayed horizontally but vertically on the latest version (2.2.2).

I downgraded to 2.2.1 and there it's horizontally again.

Is this a bug or can I set the layout orientation somehow on 2.2.2 so it's horizontally instead of vertically again?

Cheers,

Can't install

Hello,

I want to try this out but I can't install this script. I run npm install nativescript-slides

And this is response I get.

Registry returned 404 for GET on https://registry.npmjs.org/nativescript-dev-nativescript-slides

What am I doing wrong.

Thank you!

Feature Request: event when slides are disposed

Need an event when the slides are "complete" or "done" internally. This way we can reset the android status bar, also exposing a callback to the devs for done with slides (like Finish) would be good to navigate to a different part of the app.

Ios 10, xcode 8

Hey guys,

Nativescript-slides doesn't seems to work since we are on Ios 10.
Did you know about that ? Are you on it ?

Thanks ! :)

Button inside slide not working on iOS

Hi,
Please take a look at this:

    <IntroSlides:IntroSlides>
        <IntroSlides:Slide class="intro-slide-1">
            <Label text="This is Panel 1"  />
        </IntroSlides:Slide>
        <IntroSlides:Slide class="intro-slide-2">
            <Label text="This is Panel 2"  />
        </IntroSlides:Slide>
        <IntroSlides:Slide class="intro-slide-3">
            <Label text="This is Panel 3"  />
        </IntroSlides:Slide>
        <IntroSlides:Slide class="intro-slide-4">
            <Label text="This is Panel 4"  />
        </IntroSlides:Slide>
        <IntroSlides:Slide class="intro-slide-5">
            <StackLayout>
                <Label text="This is Panel 5"  />
                <Button text="Get Started" tap="getStarted" />
            </StackLayout>
        </IntroSlides:Slide>
</IntroSlides:IntroSlides>

The tap event on the button in slide 5 does not occur on iOS but works fine on Android.

What could be the cause?

Cheers.

Label textWrap not working in Slide

Great plugin! Had no issues getting this setup and working with Angular 2.

Currently, it doesn't seem like textWrap works for Labels that are placed in slides.

Steps to reproduce...

Use the following markup...

<StackLayout>
    <SlideContainer angular="true" #slides>
        <Slide>
            <Label textWrap="true" class="p" text="this is a test of some static long text to see whether or not the wrapping actually works"></Label>                            
        </Slide>
    </SlideContainer>
</StackLayout>

Result

Text is remains on the same line and is truncated at the edge of the screen.

Expected Behavior

Text on the label should wrap to the next line.

If you take that same label out of the Slide container and display it, it wraps correctly.

v2.1.3 - events not being called

The slider seems to be working except callback events don't seem to be called.

I see the internal debug message "changed active 0"...

This is in my ts file

export function onStart() { console.log( "onStart "); }

in my xml file

<Slides:SlideContainer id="slides" row="0" start="onStart" pageIndicators="false" loop="false">

angular: calling `location.back()` causes slides to go back 1 slide

Not sure if this is expected or not but I've noticed that if you display the slides on a navigated route (meaning you call this._router.navigate(['/slides']) for instance), then swipe through the slides, when you call location.back() it causes the slides to go back 1 slide (in addition to navigating the route back).

This is interesting behavior and not sure if there's something here that is responding to nav changes somehow?