Slider Revolution WP
09.27.2016
Ken Burns Image Panning
Pan images horizontally and vertically with 5 easy steps.Download the example above here. Then import it using these instructions.
1. Set your slider's Respect Aspect Ratio option to "ON".
2. Setup your Layers Grid Size and crop/resize your images.
Horizontal Pans
Images that pan horizontally should be sized/cropped (in Photoshop) to 2x the Layers Grid width, and 1x the Layers Grid height.
For the live demo above, the Layers Grid Size is 900×470. In this example, images that are panning horizontally are 1800×470.
Vertical Pans
Images that pan vertically should be sized/cropped (in Photoshop) to 2x the Layers Grid height, and 1x the Layers Grid width.
For the live demo above, the Layers Grid Size is 900×470. In this example, images that are panning vertically are 900×940.
- Using Custom Grid Sizes
If you plan on enabling Custom Grid Sizes, be sure to sizes of the same ratio. For example, if your original Layers Grid Size is 1000x500, Custom Grid Sizes should be set to the same aspect ratio (i.e. 500x250, etc.).
3. Adjust the image's background-position and Ken Burns settings.
Pan Left
Pan Right
Pan Down
Pan Up
4. Set the "Ken Burns -> Duration" to match the "General Settings -> Slide Delay"
5. Add the following code to your slider's Custom JavaScript section to create smooth "cross-fades" for sliders that auto-play.
Change the “1” in the “revapi1” part below to match your slider’s ID.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* change the "1" in the "revapi1" part below to match your slider's ID: https://www.themepunch.com/wp-content/uploads/2016/08/slider-id.png */ var api = revapi1; /* no need to edit below */ api.on('revolution.slide.onchange', function(e, data) { punchgs.TweenLite.killDelayedCallsTo(nextSlide); punchgs.TweenLite.delayedCall((data.currentslide.data('delay') * .001) - 1, nextSlide); }); function nextSlide() { api.revnext(); } |
