Menu icon Foundation
Constant text in the middle of an Orbit

Hi,

I need something simple. I need to add a Text in the middle of each slide in an orbit, each slide has an image as background, the text has to remain the same no matter if the slides are moving.

How can I do this? thanks.

Orbittextheaders

Hi,

I need something simple. I need to add a Text in the middle of each slide in an orbit, each slide has an image as background, the text has to remain the same no matter if the slides are moving.

How can I do this? thanks.

Andy Wallace over 3 years ago

Hi Paulo,

You will need a layer which sits above the orbit-container div, something like:

<div class="my-orbit-container">
    <div class="my-orbit-overlay">This is the permanent text</div>
    <ul class="example-orbit" data-orbit">
        <li>....</li>
    </ul>
</div>

and ensure that you have a style of position:relative on my-orbit-container, absolutely positioning the overlay and the orbit slider within that.

Alternatively, you could add an orbit-caption to each slide, but with the same text in each. Position and style the orbit-caption element as you wish.