You are viewing the legacy dashboard. To explore the new dashboard click here * Please note that the new dashboard will not display your existing sites until our migration tool is complete (coming soon).

Cinematic Slider

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Cinematic Slider

Cinematic Slider is a full-featured “Ken Burns” style slideshow widget that applies a slow & gentle zoom to images. This effect was introduced in film documentaries from Ken Burns and has become a very popular effect for web designers, becoming known as the “Ken Burns effect”.

If you’re familiar with the FX – Ken Burns widget, think of Cinematic slider as the much more powerful “pro” version; offering extensive customization of speed, 25 animation styles, and even an added “Hero” mode. Standard mode behaves like a standard slideshow, while Hero mode automatically displays the slider at full viewport height, just as our SuperHero widget does. Use this widget for dramatic, cinematic slideshows or any time you’re looking for a unique alternative to the other slideshow widgets.

Demo: https://demo.wocode.com/cinematic-slider

Tutorial Video

Setup

  • Place the Cinematic Slider on your page where you would like it to appear.
  • The widget size and shape is determined by the “Widget Mode” setting in the Design panel, as well as the blue grab handle on the widget container. See “Widget Mode” below for additional information.

Widget Options (Content)

  • Open the widget options.
  • Unique ID: Enter a unique name here if you intend to use multiple Cinematic Sliders on the same page.
  • Slides: Use these List Items to load your slideshow images.
  • Duration Per Slide: This sets the amount of time per slide.
  • Autoplay: this begins the slideshow automatically when enabled.
  • Loop: This loops the slideshow when enabled.
  • Shuffle Slides: This shuffles the order of the slides when enabled.
  • Navigation: This adds slideshow animation when enabled (previous and next arrows are visible)
  • Preload images: This loads the images when the page is loaded, instead of loading them as they’re triggered during the slideshow

Widget Options (Design)

There are an extensive number of design and styling options. These options allow you to customize all styling aspects of the widget. These settings are self explanatory and labeled with their exact function, so the majority of these settings will not be explained in detail within this documentation. However, there are a few key settings in the Design section that we will discuss here:

  • Widget Mode: This sets the display mode of the widget. The options are Standard and SuperHero.

    Standard mode displays the widget in a standard way, where the size of the widget can be adjusted using the blue grab handle on the widget container.

    SuperHero mode displays the slideshow full height, regardless of the screen size of the viewer. This technology is borrowed from our SuperHero Slider widget, which functions the same.
  • Height Offset: This setting can be used to account for the height of your header. By offsetting the height, your slideshow images will not be cut off by the header.
  • Animation Duration Mode: This setting is found in the Animation Settings menu. There are 2 choices: Auto and Manual.

    Auto matches the Duration Per Slide value (found in the Content tab) to the Animation Duration. In most cases, this results in a rather fast Ken Burns effect. For a slower effect, consider using the Manual mode.

    Manual mode allows you to set the Animation Duration. Animation Duration sets the amount of time it takes to complete the Ken Burns zooming effect. Longer times result in a slower effect.

Related Articles

Join Now