NativeScript Snacks

        
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="pageLoaded">
	<GridLayout rows="*, auto" cols="*, auto, *">
		<Slides:SlideContainer id="slideContainer" class="coverImage" row="0" colSpan="3" androidTranslucentStatusBar="true" androidTranslucentNavBar="false">
			<Slides:Slide class="transparent">
				<Label margin="250" row="0" colSpan="3" text="Welcome Coders!" textWrap="true" class="title" />
			</Slides:Slide>
			<Slides:Slide class="transparent">
				<GridLayout rows="*, auto" cols="*, auto, *">
					<Image row="0" colSpan="3" src="~/images/rocketTwo.png" stretch="aspectFit" class="slideImage" />
					<Label row="1" colSpan="3" text="Interact and engage your audience. Trust us, this will pull them in." textWrap="true" class="message" />
				</GridLayout>
			</Slides:Slide>
			<Slides:Slide class="transparent">
				<Label row="0" colSpan="3" text="Let's make app slides great again." textWrap="true" class="title" />
			</Slides:Slide>
		</Slides:SlideContainer>
		<GridLayout class="slideFooter" row="1" colSpan="3" rows="*" columns="*, *">
			<Button class="footerBtn" text="Prev" tap="prev" row="0" col="0" />
			<Button class="footerBtn" text="Next" tap="next" row="0" col="1" />
		</GridLayout>
	</GridLayout>
</Page>
        
      

        
.coverImage {
    background-image: ~/images/ufo.png;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.transparent {
  background-color: transparent;
}

.title {
  color: #f1f1f1;
  font-size: 35;
}

.message {
  font-size: 20;
  margin: 8;
  color: #f1f1f1;
}

.slideFooter {
  background-color: transparent;
}

.footerBtn {
  background-color: white;
  color: #333;
}
        
      

        
        
import { EventData } from 'data/observable';
import * as pages from 'ui/page';

let page: pages.Page;
let slideContainer: any;

// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: EventData) {
	// Get the event sender
	page = args.object;
	page.actionBarHidden = true;
	slideContainer = page.getViewById('slideContainer');
	console.log(slideContainer);	
}

export function next(args: EventData) {
	console.log('Next slide');
	slideContainer.nextSlide();
} 
 
export function prev(args: EventData) {
	console.log('Previous slide');
	slideContainer.previousSlide();
}

		</code>
      </pre>
    </div>
  </li>
  
</ul>