The Slider

5.0, Slider Layout, Slider Settings, Slider Type07.14.2015Krisztian

1. Slider Types

Screen Shot 2015-07-14 at 16.08.38

The Standard Slider

This is a Regular / Classic slider type. You can define 1+ Slides per slider, and they will be shown as slideshow one by one. In doing so you will only see 1 Slide in the same time. Each Slide can have an individual Delay time, elements and transition type. Slides can have Ken Burns effect, Parallax options etc.

sliderType:”standard”

i.e.  examples/Types/standard.html

Screen Shot 2015-07-14 at 16.08.48

The Hero Scene

Basically the same as a Regular Slider with only 1 Slide loaded. This will reduce the loading of jQuery Extensions to save time and performance for your page. Usually usage example for Hero Blocks. The Slider can have any effects just like in the Regular Slider like ken burns, parallax, video bg etc.

sliderType:”hero”

i.e.  examples/Types/hero.html

Screen Shot 2015-07-14 at 16.08.57

The Carousel Slider

You can define 1+ Slides in the slider. Depending on the Carousel settings you can see one or more slides in the same time, aligned to the left, center, right, zoomed, rotated etc. based on the settings.
Each slide can have layers, just like in the Regular Slider, however only the focused Slide will show and animate the layers. Defocusing a slide (by drag and pull, or navigation) the layers will animate out.
Slides can have any kind of effect, just like in the Regular slider, i.e. Ken Burns, Parallax, video BG etc..

sliderType:”carousel”

i.e.  examples/Types/carousel.html

2. Slider Layouts

autofill

Auto Responsive
Auto fill the wrapping Containers Width, and calculate the Height based on predefined Grid Sizes.

sliderLayout:”auto”

i.e.  examples/Layouts/auto-sized.html

fullwidth

Full Width
Force the width of slider to always fill the full browser width. The height will still be auto calculated based on the Grid Sizes.

sliderLayout:”fullwidth”

i.e.  examples/Layouts/fullwidth.html

fullscreen

Full Screen
The Slider will get the size of the Browser width and height (manipulating height is possible due options !)

sliderLayout:”fullscreen”

i.e.  examples/Layouts/fullscreen.html

3. Slider Markup

Every slide is a HTML List Element <li> within the Sliders Unsorted List Tag <ul> element.

Navigation Elements and Progress Bar will auto Added after the Unsorted List elements <ul> within the rev_slider Container.

Static Layer Container comes after the Unsorted List element <ul> within the rev_slider Container.

4. Advanced Sizing

4.1 Grid Size

The Slider size will always depend on the Wrapping container size and on the Layer Grid Sizes (defined via the options gridwidth and gridheight).

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.

To set the Slider to Auto, FullWidth or Fullscreen, use the option sliderLayout option. To Set the content container size within a slider, use the gridwidth and gridheight options.

gridwidth:1230
gridheight:720

i.e.  examples/Layouts/fullscreen.html

 

How to set Maximum Width for a Slider ?
To get a Maximum Width of a slider, set the css attribute max-width for the wrapping container.

i.e.  examples/Layouts/max-width.html

4.2 Respect Aspect Ratio

The Layer Grid size  (gridwidth and gridheight) defines an aspect ratio which is always  respected,  independent of the browser size.

The Slider width is always equal to the wrapping containers width, and the height is equal to the gridheight as default. However this can be manipulated.

Slider should respect the Aspect Ratio ?

To manipulate the height, and allow the slider to get higher size than the gridheight, you can  use the options autoHeight which will allow the Slider to always keep the Aspect Ratio which is set via the gridwidth and gridheight parameters.  This will horizontal and vertical center the Layer Grid within the Slider in case the height or width of the slider is bigger than the predefined gridwidth and gridheight sizes.

autoHeight:”on”

i.e.  examples/Layouts/respect-aspect.html

4.3 Slider Minimum Height

Via the option minHeight you can define a minimum height for the Slider. This will not influence the height of the Layer Grid!  In case Minimum Height of Slider set, the Layer Grid will always be vertical centered in the Slider as long the Slider is higher than the Layer Grid itself.

minHeight:700

i.e.  examples/Layouts/min-height.html

4.4 Responsive Levels
responsivelevels

Slider Revolution allows you to define 4 Different Aspect Ratio, one for each common Display Types like:

  • Desktop
  • Notebook
  • Tablets
  • Phones

This way you can have a different Layout per slide for each Display type, having different Grid Sizes (Aspect Ratios), different Font Sizes, Positions of elements, Image sizes, visibility of elements etc.

Once you define the responsiveLevels, you will need to define via 4 levels the Grid sizes, Font sizes, dimensions of elements etc… In any case where definitions are missed, the Slider will catch the next possible value defined above/below that Device type. (see later due some examples).

As first please define the option for the Device Types via the responsiveLevels.

responsiveLevels:[4064,1024,778,480]

A Typical Initialisation Script could look like this:

i.e. examples/Layouts/responsive-levels.html

  • NOTE!
    You will see a short notice at any Attributes where more than one level "value" can be defined.