Create Intro Slides

Brad shows how easy it is to create an app intro with swipeable slides.

  •         
    <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>