Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Anatomy of Slider Revolution

07.14.2015Krisztian

Contents

1. Basic Anatomy

1.1 Components

A Slider is a collection of one or more slides to present them one by one in a predefined Order.  Each Slider should have an individual, unique ID which will allow to initialise, reference and  manipulate the slider to any point of time. Every slider, independent of its Art and Style, can include following components/elements:

  • Slides(*)
    • Main Images(*)
    • Layers
      • Text / HTML Markups
      • Button
      • Shapes
      • Videos
      • Audio
      • Images
  • Static Layers
    • Text / HTML Markups
    • Button
    • Shapes
    • Videos
    • Audio
    • Images
  • Navigation  
    • Arrows
    • Bullets
    • Tabs
    • Thumbnails
  • Progress Bar

(*) This Components must be defined always ! Without Slide and Main images ( or Solid Colored Background Image) you can not build any Slider.

1.2 The Layer Grid
  • The Layer Grid is the parent container of any contents within the Slides. Layers like Image, text, video, button, shapes are contents and they will be shown relative positioned within the Layer Grid.
  • The size of the grid is defined via the gridwidth and gridheight parameters during the initialisation of the Slider. These Size settings define also the Maximum size of the Layer Grid container.
  • The grid size and all component inside will shrink first, when the Size of the Slider becomes smaller than the predefined width or height of the Grid.
  • The Grid will automatically resize keeping the original Aspect Ratio and also resize any element inside with Responsive behaviors. It will never grow bigger than the Predefined Sizes.
  • The Layer Grid is invisible, and only a Logical Container for the Layers.
  • The Size of the Grid should be set based on your Document Content size.
    i.e. Your Photos Aspect Ratios are 16:9 and your Pages width is 1240px In this case you should set gridwidth to 1240px and gridheight to 1240/16*9 = 697px
gridvsslider
1.3 Layer Grid vs. Slider Size
  • Since the Grid Layer only defines the Size of the Parent Container of the layers, the slider will try to fill the full width of the wrapping container.
  • The slider always calculate the width first and will calculate the height once the Zoom factor is determined based on the current Layer Grid width and predefined Layer Grid width. This width will be never bigger than the Predefined Width, and will shrink if the parent container smaller than this value. The zoom factor is calculated based on this effect, and will linear shrink the height of the Layer Grid, and will also linear resize any included Layers (based on their Behavior and Layer settings).
  • Independent of the Grid Size, the Slider can have a wider or higher size. Just like Fullwidth slider, Fullscreen Slider, auto Height slider. Note ! Even if the slider is wider or higher than the Layer Grid itself, the Grid will not increase its size , but will align center center within the Slider Container.
  • As Defaults (can be changed via options)
  • the Slider will always follow the width of the parent container, and calculate the height based on the predefined Grid Height and current zoom factor.
  • the Slider will not get higher than the predefined Grid Height. Even if the Slider can change its aspect ratio, the Layer Grid will keep its original Aspect Ratio for any time, and will be horizontal and vertical Centered.
  • i.e Breaking the Default Rules
  • Using options like autoHeight:”on” will allow the Slider to keep the Aspect ratio of the Layer Grid also, in doing this the Layer Grid will still keep the max. width and height as predefined and will be horizontal and vertical centered.
  • Layer Dependencies
  • Again, all layers are relative positioned to the Grid Layer. Means the top left corner of the Layer Grid Container is 0,0. As we learned this must not be equal to the top left corner of the Slider , however we will show you in the Advanced Layer settings how to set Layers relative to Slider container.