Tirenoa Slider Element
The Tirenoa Slider Element places a slider on the page that you have built under Tirenoa > Sliders. The slides themselves, with their images or videos, headings, captions and buttons, are managed there; the element only decides where the slider appears and how tall it is.
This makes the same slider easy to reuse: build it once and show it on a home page, a landing page or in a header section. Changes to the slides show up everywhere the slider is used, and the slider can be made as tall as the screen.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Tirenoa Slider Element
First create the slider under Tirenoa > Sliders and add slides to it. Then add the Tirenoa Slider Element to a column and choose it in Slider Name; the list shows each slider with the number of its slides in brackets.
Size, navigation arrows, pagination circles or a scroll-down indicator, autoplay, speed, looping and the order of the slides are settings of the slider itself, not of the element. Change them in the slider’s settings under Tirenoa > Sliders, and every page that uses the slider follows.
Turn on Full Height to make the slider fill the height of the screen. Full Height Offset subtracts a fixed amount from that height: enter a pixel value or a CSS selector, for example of a fixed header, whose height is then subtracted. Use Margin for the space above and below the slider.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Slider Name | Select the slider you want to use. The options will appear as the slider name next to the number of slides in brackets. |
| Full Height | Makes slider full screen height. |
| Full Height Offset | The slider offset. Accepts both pixels and CSS selectors. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- If the chosen slider is deleted or its slug is changed, the page shows an error message instead of the slider. Check the pages that use a slider before you delete it.
- A slider without slides shows nothing at all.
- Keep the number of slides small and compress the images. Large slider images at the top of a page slow down how quickly the page appears.
- Put the most important message on the first slide. Many visitors never wait for the next one.
- Full Height Offset only shows when Full Height is on.
- The parallax scrolling effect in the slider settings only works when the slider is assigned in the page options, not in this element.