Orbital Slider Text overlay and...

User 2022095 Photo


Registered User
121 posts

Hello can anyone explain how to incorporate text overlay and change the default orbital slider transition in Foundation Framer.

Thanks,
-WMFX
User 2699991 Photo


Registered User
4,782 posts
Online Now

Hello from Sunny Bali
1/ Not sure you can put text overlay on that but then I have never used it because there are a lot of better one's out there that can do what you want also and have a larger range of effects, so I don't really know, maybe someone else will know for sure.

2/"Transitions" are in the design panel thingy just under the style section,,(It's called "Transitions") you can change the transitions for all properties (default) or make a new one.

What I do know is that "orbit" is no longer supported by foundation, there are hundreds of other slider thingies out there that are available and apparently a lot better.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 244626 Photo


Registered User
811 posts

You may want to pick up CoffeeCup's Bootstrap Builder Beta....and use Bootstraps slideshow component Carousel with animate.css

http://gluexp.coffeecup.com/index.html

I have not tried programming in the delays yet but working on it....
Bootstrap 5 CSS Grid.
User 2022095 Photo


Registered User
121 posts

Thanks Wayan Jaya and Twinstream for the reply.
Hey Twinstream I have all of the CC responsive builders. Thanks for the suggestions everyone, I'll take BB out for a spin again.

Again Thanks,
-WMFX
User 244626 Photo


Registered User
811 posts

Overlays are possible using the absolute setting in position for the heading.

http://gluexp.coffeecup.com/orbit.html

Adding the animate.css to the head and then simply adding "animated" and the Animate.css "effectName" to the heading or image gets you entrance animations with some pretty straight forward stuff.

I disabled the slide mode of Orbit by adding - in the orbit main container - the attribute Data Use M U I and set to false.

https://daneden.github.io/animate.css/

Going any further .....stay with RCS.;)
Bootstrap 5 CSS Grid.
User 2022095 Photo


Registered User
121 posts

Thanks Twinstream.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.