A Cool Image Carousel

Brad shows how to create an image carousel with his NativeScript-Slides plugin.

  •         
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="pageLoaded">
    
    	<StackLayout>
    		<GridLayout height="300" rows="*, auto, *" columns="auto, *, auto">
    		
    			<Button row="1" col="0" text="&#xf053;" tap="prev" class="carousel-btn FontAwesome" />
    			
    			<Slides:SlideContainer height="100%" row="1" colSpan="3" loop="true" id="slideContainer">
    				<Slides:Slide class="image-slide">
    					<Image src="~/images/wolverine.jpeg" stretch="aspectFill" class="slideImage" />
    				</Slides:Slide>
    				<Slides:Slide class="image-slide">
    					<Image src="~/images/spiderman.jpeg" stretch="aspectFill" class="slideImage" />
    				</Slides:Slide>
    				<Slides:Slide class="image-slide">
    					<Label text="Let's make app slides great again." textWrap="true" class="title" />
    				</Slides:Slide>
    			</Slides:SlideContainer>
    			
    			<Button row="1" col="2" text="&#xf054;" tap="next" class="carousel-btn FontAwesome" />
    			
    		</GridLayout>
    		
    		<ScrollView>
    		
    			<StackLayout>
    				<Label text="Bacon ipsum dolor amet short loin corned beef pork loin ham hock jowl chicken. Strip steak venison cupim capicola brisket tail ball tip flank meatloaf doner pork chop. Shank venison shankle leberkas landjaeger. Ground round beef ribs cow, porchetta pork doner ham hock venison tenderloin landjaeger shankle pancetta leberkas biltong. Flank rump short ribs kevin frankfurter cupim venison strip steak picanha ground round filet mignon short loin sausage corned beef." textWrap="true" />
    				<Label text="Bacon ipsum dolor amet short loin corned beef pork loin ham hock jowl chicken. Strip steak venison cupim capicola brisket tail ball tip flank meatloaf doner pork chop. Shank venison shankle leberkas landjaeger. Ground round beef ribs cow, porchetta pork doner ham hock venison tenderloin landjaeger shankle pancetta leberkas biltong. " textWrap="true" />
    				<Label text="Bacon ipsum dolor amet short loin corned beef pork loin ham hock jowl chicken. Strip steak venison cupim capicola brisket tail ball tip flank meatloaf doner pork chop. Shank venison shankle leberkas landjaeger. Ground round beef ribs cow, porchetta pork doner ham hock venison tenderloin landjaeger shankle pancetta leberkas biltong. " textWrap="true" />
    			</StackLayout>
    			
    		</ScrollView>
    	</StackLayout>
    	
    </Page>        
    		
          
  •         
    .carousel-btn {
      color: #fff;
      font-size: 25;
      background-color: rgba(#3489db, green, blue, 0.4);
      border-radius: 40;
      height: 60;
      vertical-align: bottom;
    }
    
    .FontAwesome {
        font-family: FontAwesome;
    }
    
    .title {
      color: #f1f1f1;
      font-size: 35;
    }
    
    .image-slide {
      background-color: #222;
    }
            
    		
          
  •         
            
    var page;
    var slideContainer;
    
    
    // Event handler for Page "loaded" event attached in main-page.xml
    function pageLoaded(args) {
        // Get the event sender
        page = args.object;
        page.actionBarHidden = true;
        slideContainer = page.getViewById('slideContainer');
        console.log(slideContainer);
    }
    exports.pageLoaded = pageLoaded;
    
    
    function next(args) {
        console.log('Next slide');
        slideContainer.nextSlide();
    }
    exports.next = next;
    
    
    function prev(args) {
        console.log('Previous slide');
        slideContainer.previousSlide();
    }
    exports.prev = prev;