jQuery Version Responsive Settings
Responsive settings for setting up your slider content to display well across multiple devices.
- Important Article Note:
This article is for the non-WordPress version of the plugin. If you're using the WordPress version, watch this screencast instead.
1. How it works
Slider Revolution has 4 built-in Custom Responsive Levels that can be used. These essentially operate as CSS media query breakpoints, providing the opportunity to tailor your slider content for multiple screen sizes.
As an example, a Text Layer could be positioned differently on a mobile device and also have its font-size adjusted. Or you could choose to hide the Layer entirely for one of the breakpoints.
1. Define your Responsive Levels
Defined in the slider’s main JavaScript settings. In the following example, 1240 would be used for the desktop content, 1024 for tablet landscape, 778 for tablet portrait, and 480 for smartphones.
1 2 3 |
responsiveLevels: [1240, 1024, 778, 480], |
2. Define your Custom Grid Sizes
Define canvas sizes for the slider at each breakpoint. For the best setup, use the same numbers for the “gridwidth” as you used for the “responsiveLevels” in the code above. And then adjust your “gridheight” values to whatever looks best across the 4 different break points.
1 2 3 4 |
gridwidth: [1240, 1024, 778, 480], gridheight: [600, 600, 500, 400], |
3. Expand your Layer Content settings to include additional values for each breakpoint
In the following example code, the “data-visibility” option is particularly useful, as this would allow you to show/hide a content Layer for any given breakpoint, allowing you to display different Layers for different devices if you wanted.
1 2 3 4 5 6 7 |
data-x="['center', 'center', 'center', 'center']" data-hoffset="['0', '0', '0', '0']" data-y="['middle', 'middle', 'middle', 'middle']" data-voffset="['0', '0', '0', '0']" data-fontsize="['48', '36', '36', '24']" data-lineheight="['72', '54', '54', '36']" data-visibility="['on', 'on', 'on', 'off']" |