RoyalSlider Demo: Two Mini-Banners

  • Use Slider
    as Presentation
    or as Gallery
  • Create
    Awesome
    Slideshows
  • Custom
    Animation
    Effects
  • Showcase
    Product

	jQuery(document).ready(function($) {			   
		var banner1 = $('#banner1').royalSlider({
			slideTransitionType: "fade",
   			slideTransitionSpeed: 600,              
  			slideTransitionEasing: "easeInOutSine",
			captionShowEffects: ["moveleft", "fade"],
			captionShowDelay: 200,
			captionShowSpeed: 400, 
 			captionShowEasing: "easeOutBack",
			directionNavEnabled: false,
			controlNavEnabled: true,
			slideshowEnabled: true,           
			slideshowDelay: 3000			
	    }).data("royalSlider");				
		
	
		var banner2 = $('#banner2').royalSlider({
			slideTransitionSpeed:400,              
  			slideTransitionEasing:"easeInOutCubic",
			controlNavEnabled:false,
			slideshowEnabled: false,           
			slideshowDelay:4000,	
			hideArrowOnLastSlide:false,
			
			beforeLoadStart:function() {					
				$("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
				this.arrowLeft.html("←");
				this.arrowRight.html("→");
			},
			beforeSlideChange:function() {					
				$("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
			}
	    }).data("royalSlider");	 
	});