Omnira JavaScript features
All interactivity is in one small file, assets/js/omnira.js, plus Bootstrap 5's own script. There's no jQuery. Each feature is switched on by an HTML attribute, so you can reuse it anywhere.
Everywhere#
| Feature | How to use it in HTML |
|---|---|
| Fade-in on scroll | data-reveal, data-reveal="left", data-reveal="right"; delay with style="--d:200ms". |
| Counting numbers | <span data-count="1200">0</span> counts up when visible. |
| Video pop-up | <a href="#" data-video="https://www.youtube.com/embed/ID">…</a> |
| Image lightbox | <a href="#" data-lightbox="group-name" data-src="big.jpg" data-caption="…"><img …></a>. Links with the same group can be browsed with arrows and the keyboard. |
| Filters | A data-filter-group row of <button data-filter="web"> (and data-filter="*" for All), next to a data-filter-items container whose children have data-cat="web". |
| Countdown | <div data-countdown="2027-06-12T16:00:00"> with <span data-cd="d">, "h", "m", "s" inside. |
| Pricing monthly/yearly | The pricing section with "toggle": true: prices swap between data-monthly and data-yearly. |
| Card slider arrows | The slider section (data-slider with data-slide-prev/data-slide-next buttons). |
| Before / after | The before-after section (data-ba). |
| Forms | data-demo-form shows a thank-you message while action is #. |
| Current year | <span data-year></span> |
| Sticky header, back to top, menu highlighting | Automatic. |
| Colour switcher | Automatic when present; remembers the choice per demo. |
Real estate#
- Listings browser (properties section): filters (keyword, status, city, type, bedrooms, price, area), sort, grid/list view and pagination. It reads filters from the page address, so the search box's
properties.html?city=Austinarrives pre-filtered. - Saved homes and compare: heart and compare buttons (
data-fav,data-compare) are remembered in the visitor's browser and shown on the favourites and compare pages. - Mortgage calculator (mortgage): updates as you type.
Shop#
- Cart (cart): quantity buttons, remove, and live subtotal, shipping, tax and total.
- Product gallery (product-detail): thumbnails swap the main photo; the selected colour name updates.
The cart and saved lists live in the visitor's browser only. A real shop needs an e-commerce system to take orders and payments.
Bootstrap components#
Tabs, accordions (FAQ), carousels (sliders), the mobile menu and the video modal are standard Bootstrap 5 components, so Bootstrap's documentation applies to them.
Adding your own script#
With the source files, put a new file in src/js/modules/; it's added to omnira.js automatically. Make it safe on pages where its elements don't exist. In the HTML files, add a <script src="…"> before </body>, after omnira.js.