ORBIT CAROUSEL - TUTORIAL

User 2823310 Photo


Registered User
312 posts

The step by step tutorial is completed for customizing the foundation ORBIT component

ORBIT EXAMPLE
ORBIT TUTORIAL
The step by step tutorials
HOME PAGE

If you use the step by steps, remember to refresh / reload your browser
to see the new updated tutorials, example pages and site changes
if you haven't set up your browser for history
User 244626 Photo


Registered User
809 posts

Great Tutorial once again Alter Eagle.

One feature I use is to add the attribute "data-use-m-u-i" and set to "false" which disables transitions and allows for a very fast click through slideshow for those in a hurry and want to click the "Buy Now" button.
Bootstrap 5 CSS Grid.
User 2823310 Photo


Registered User
312 posts

Yeah Gary I was going to add that but thought if you were going to do that you'd probably just use a gallery, but them it wouldn't slide now would it? Like duh :lol:

By the way one of us should come up with a decent galley.
The component one is a bananaerama of redundant complexity extraordinaire
kinda like that sentence
User 2823310 Photo


Registered User
312 posts

Updated the Orbit Tutorial:
How to change the component from the default row and place it into a pages column
How to turn the animations off, as twinstream suggested
How to get a "sticky" positioned menu to go above the orbit carousel
User 2823310 Photo


Registered User
312 posts

Updated the Orbit Tutorial:
Russ & Twinstream reported that on initial load the image may not open
That may show a small line until the page is resized for some browsers
That requires a CSS repair that Twinstream supplied and is now included in the tutorial
User 2694537 Photo


Registered User
26 posts

It's too bad that Orbit is deprecated. Foundation still has it in the Framework, but they are no longer developing or supporting it.
User 2699991 Photo


Registered User
3,752 posts
Online Now

DebC wrote:
It's too bad that Orbit is deprecated. Foundation still has it in the Framework, but they are no longer developing or supporting it.


it's back now supported & a great little component, especially doing some of the stuff Alter Eagle shows how to do it for different effects

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 1869666 Photo


Registered User
213 posts

With the Orbit Component is it possible to use the full width of the screen?
User 2088758 Photo


Senior Advisor
2,985 posts

Hi Carolyn,

Yes you can just set the container to flex then to 100% on width.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 1869666 Photo


Registered User
213 posts

That did it Steve! Thank you so much!!

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.