Pick National Day 96 from the theme switcher in the top bar: the six-slide hero appears and the section decorations apply. Switch back to undo.
Automatic
One tag in your shared <head>, after the NDS stylesheets, without defer. Pick the hero type with data-type. Delete the tag to end the event. The script carries the pack's CSS, so the tag is the only asset you add to the page. You need the .min.css file only for the no-script setup below, or when you want to override a rule.
<script src="/assets/events/national_day_96/nds-theme-national-day-96.min.js"></script>
<script src="/assets/events/national_day_96/nds-theme-national-day-96.min.js" data-type="1"></script>
- Type 2 (default): the official campaign hero. Six slides, each with its own card, colour and typed word, moving on by themselves. Your own hero slides step aside while the pack is on and return when it is removed. The content is fixed.
- Type 1: one plain slide with the event photo, added in front of your own slides. The title, description, image and button attributes in the table below apply to it.
- Files: download the zip and copy its files into your own assets folder. The script finds its CSS and images next to itself, so the folder works at any path as long as it stays together. The paths above assume
assets/events/national_day_96/. - Older NDS: works on releases before deck mode too (tested on 1.9.0; the swiper hooks it uses exist since 1.4.0). Before 1.12.0 the swiper has no loop, so the arrows stop at the ends while the cards, auto-advance and drag still wrap.
Manual (no JavaScript)
Both hero types work without the script: link the stylesheet and paste the markup yourself. Add the CSS link in <head>. Add the event mark to the footer's existing .nds-footer-logos strip.
Type 1 adds one slide to your existing hero. Place it as the first child of .nds-swiper-wrapper and raise the hero's --total by one. It is the standard hero markup with the event photo, so it needs no extra styling.
Type 2 replaces the hero with the card deck. Write the cards in slide order and the deck mode places them — no per-card attributes. Pick the campaign colour with one nds-nd96-<name> class on the section: heritage, courage, ambition, generosity, kindness or vision.
The script is what adds the typed word, the colour change on every slide, and the automatic advance. Without it the hero keeps one colour and the word is plain text.
<link id="nds-theme-stylesheet" rel="stylesheet"
href="/assets/events/national_day_96/nds-theme-national-day-96.min.css">
<!-- add inside the footer's existing .nds-footer-logos strip -->
<img src="/assets/events/national_day_96/national_day_logo.svg"
width="101" height="40" loading="lazy" alt="Saudi National Day 96">
Data Attributes
All go on the <script> tag, all optional. Only data-type and data-logo apply to type 2; the rest shape the type 1 slide. Asset values take a bare filename (resolved against the pack folder) or a full https URL.
| Attribute | Default | Description |
|---|---|---|
data-type | 2 | Hero type. 2 is the official six-slide hero with its fixed campaign content. 1 is one plain slide; the title, description, image and button attributes below apply to it only. |
data-title-ar / data-title-en | اليوم الوطني السعودي 96 / Saudi National Day 96 | Type 1 slide heading per language. |
data-description-ar / data-description-en | نحتفي بمرور 96 عامًا … / We celebrate 96 years … | Type 1 slide description. Empty value hides it. |
data-image | hero_bg.webp | Type 1 slide background photo. Empty value drops the photo and keeps the default hero surface. |
data-logo | national_day_logo.svg | Event mark, added to the footer logo strip. Empty value omits it. |
data-cta-url | (none) | Type 1 opt-in button link. Empty (default) means no button; non-https is rejected. |
data-cta-label-ar / data-cta-label-en | اليوم الوطني / National Day | Button label per language (only when data-cta-url is set). |
data-cta-icon | (none) | Button icon. Empty omits it. |
Built-in Features
One script tag applies the stylesheet it carries, the root marker, and the hero slide. No build, no markup edits.
The pack adds no brand colours. Your existing palette and every component keep their own colours.
The campaign hero on the swiper's deck mode: six slides, each with its own card, colour and typed word, moving on by themselves. Type 1 keeps one plain slide with the event photo instead.
A thin event bar sits under every content section, rotating through three artworks, with a corner vector on even sections.
The mark joins the footer's own logo strip, which already sizes every mark, so it lines up with your existing logos.
Each string has Arabic and English values; the pack picks one from the page direction: dir="rtl" reads Arabic, anything else English.
The same pack plugs into the theme switcher: loads on demand, applies on selection, tears down on switch-away.
Usage Guidelines
Best Practices
- Use an event pack for a temporary, site-wide skin tied to an occasion. For a permanent brand colour, use a custom palette or stylesheet theme instead.
- Add the tag to your shared
<head>on every page, not just the home page, so the decorations stay consistent. - Set
data-imageto your own event photo when you have one, so the hero matches your campaign. - Host the pack folder yourself instead of hotlinking a third-party origin.
- Plan the removal up front: deleting the one line is the entire decommissioning.