เลือกรูปแบบ

เลือกคู่สีของ Font, Button และอื่นๆ

เลือกสีของพื้นสีเว็บ


รูปแบบขอบด้านข้างของเว็บ

พื้นหลังแบบ Pattern

พื้นหลังสำหรับขอบด้านข้างของเว็บที่เป็น Box


×

Revolution Slider

Fullscreen Offsetdocumentation exmaple

This example is provided by the vendor. This is also included on purchased version!
You can easy edit any example using caption & transition editor.
Revolution Slider - one of the most powerful available sliders!


  • slidebg1
    BASIC CAPTION
    ANIMATIONS
    FADE
    SHORT FROM LEFT (sfl)
    SKEW FROM LEFT (skewfromleft)
    SHORT FROM TOP (sft)
    LONG FROM TOP (lft)
    SHORT FROM RIGHT (sfr)
    SKEW FROM RIGHT (skewfromright)
    SHORT FROM BOTTOM (sfb)
    LONG FROM BOTTOM (lfb)
    RANDOM ROTATE (randomrotate)
    LONG FROM RIGHT (lfr)
    LONG FROM LEFT (lfl)
  • slidebg1
    SOME FANCY EASING
    Power1.easeOut
    Back.easeOut
    Elastic.easeOut
    Power3.easeInOut
    Power4.easeOut
    Power2.easeInOut
    Circ.easeOut
    Cube.easeOut
    Bounce.easeOut
    Linear.easeNone
    Expo.easeOut
    Expo.easeIn
  • slidebg1
    TRY THE
    CAPTION ANIMATION
    BUILDER BELOW
    GO AND GIVE A TRY
  • slidebg1
    CREATE AWESOME ANIMATIONS

THIS IS SOME FOOTER CONTAINER, TO SHOW HOW THE OFFSET CONTAINERS WORK.

What to do for FullScreen Offset?

Make sure that your slider Wrapping Container allows you to go fullwidth and fullheight, and there is no limitation in width / maxwidth.In case your container is Boxed, and you want to force the Slider to go Fullscreen, than simple use the forceFullWidth:"on" parameter !

If you dont need the Offset (header and footer) take a look on the simple Fullscreen example here: Sample FullScreen

Initialise the Plugin somewhere in the Body Footer:

<script type="text/javascript">

	var revapi;

	jQuery(document).ready(function() {

		   revapi = jQuery('.tp-banner').revolution(
			{
				delay:15000,
				startwidth:1170,
				startheight:500,
				hideThumbs:10,
				fullWidth:"off",
				fullScreen:"on",
				fullScreenOffsetContainer: ""

			});

	});	//ready

</script>