Menu icon Foundation
How do I add content (text and button) on top of the Orbit slider?

Hello,

I'd like to add some text and a button on top of the orbit slider, how would I achieve this and keep the responsive layout of foundation 5?

Can this be achieved with captions?
It's worth noting that I would like the text and the button to appear on the right hand side of the page and to be vertically centered on the image.

Any Help would be greatly appreciated.

 <div class="row">
            <div class="large-12 columns">
                <ul class="example-orbit" data-orbit>
                    <li>
                        <img src="img/main-background.jpg" alt="slide 1" />
                    </li>
                    <li>
                        <img src="img/main-background.jpg" alt="slide 2" />
                    </li>
                    <li>
                        <img src="img/main-background.jpg" alt="slide 3" />
                    </li>
                </ul>
            </div>
        </div>           

         

csshtmlFoundation 5Orbit

Hello,

I'd like to add some text and a button on top of the orbit slider, how would I achieve this and keep the responsive layout of foundation 5?

Can this be achieved with captions?
It's worth noting that I would like the text and the button to appear on the right hand side of the page and to be vertically centered on the image.

Any Help would be greatly appreciated.

 <div class="row">
            <div class="large-12 columns">
                <ul class="example-orbit" data-orbit>
                    <li>
                        <img src="img/main-background.jpg" alt="slide 1" />
                    </li>
                    <li>
                        <img src="img/main-background.jpg" alt="slide 2" />
                    </li>
                    <li>
                        <img src="img/main-background.jpg" alt="slide 3" />
                    </li>
                </ul>
            </div>
        </div>           

         
Rafi Benkual over 5 years ago

You can add it to the captions like so http://cdpn.io/tsfuH

Or you cad put them over a background image (slide 1)
http://cdpn.io/lBaCL
Or onto the image in the div (slide 2)

Tom Hogan over 5 years ago

Hi Gareth,

Rather than a simple caption I placed some text inside a transparent box along with a button and put them both on the right-hand side of a full screen background image using orbit.

I was playing with a full screen image using orbit and figured I'd kill 2 birds with one stone and add the text and button when I saw your request. You should be able to change the full screen image for the traditional slider without much trouble. Let me know if I can be of any further help.

http://codepen.io/WideGlide/pen/xbcsn

Tom

Gareth Edwards over 5 years ago

Thanks Rafi.

Gareth Edwards over 5 years ago

That's perfect, Thank you for your time Tom.

Also, nice dog.

narang gupta about 1 year ago

Thanks A Lot, Dude. it Really Helped Me A Lot.

WhatsApp Unblocked