Client Docs

NEXSLIDER

Modern, static-first slider SaaS. Build animated sliders in the editor, publish to a CDN, and embed them on any site with a single iframe.

What It Is

  • Alternative to Slider Revolution focused on static publishing, fast loads, and a modular animation system.
    • Publishes HTML, CSS, and JS to Bunny Storage; everything (including images) is served from the CDN.
      • Embeds via an iframe that isolates styles and runtime for safe integration.

      Core Functionality

      • Editor models sliders as styles, slides, and layers (text, image, HTML, shapes).
        • Modular animations generate per-animation CSS (keyframes + per-layer rules).
          • Timeline sequencing triggers layer animations when a slide becomes active.
            • One-click publish generates a full `index.html` (HTML + CSS + inline runtime) and uploads it to Bunny Storage.
              • The embed loads only `index.html` (no extra cross-origin fetches) inside an iframe.

              How It Works

              • Publish endpoint: `POST /api/sliders/:id/publish` generates HTML/CSS + inline runtime into a single `index.html` file and uploads it to Bunny Storage.
                • Embed: `` renders the slider in an isolated document.
                  • Runtime: lightweight JS handles slide activation and transitions based on slider config.
                    • Images: during publish, image sources are uploaded to Bunny and rewritten to CDN URLs.

                    Quick Start (Dev)

                    • Env vars: `DATABASE_URL`, `BUNNY_ACCESS_KEY`, `BUNNY_STORAGE_ZONE`, optional `NEXT_PUBLIC_BASE_URL`.
                      • Run locally: `bun run dev` (or `npm run dev`).
                        • Build for production: `bun run build`.

                        Embedding

                        Add this to any page where you want the slider to appear:

                        <object type="text/html" data="https://cdn.slider.nexwinds.com/<id>/index.html" style="width:100%;height:400px;border:0"></object>

                        Alternative embeds:

                        <!-- iframe (isolated document) -->
<iframe src="https://cdn.slider.nexwinds.com/<id>/index.html" style="width:100%;height:400px;border:0" loading="lazy"></iframe>

<!-- embed (older tag, may lack fallback) -->
<embed type="text/html" src="https://cdn.slider.nexwinds.com/<id>/index.html" style="width:100%;height:400px;border:0" />

                        Sizing (required for visibility):

                        <!-- Inline sizing on <object> -->
<object type="text/html" data="https://cdn.slider.nexwinds.com/<id>/index.html" style="display:block;width:100%;height:400px;border:0"></object>

<!-- Or global CSS -->
<style>
  iframe.slider { display:block; width:100%; height:400px; border:0; }
  /* Adjust height to your layout */
  /* The internal .nx-root also has min-height for safety */
  /* but the iframe must have a visible height */
</style>

                        Troubleshooting:

                        • Blank slider: ensure the `` has a height (e.g. 400px). Slides use `position:absolute` and need a container with height.
                          • CORS errors: all embeds load from the CDN; no additional cross-origin fetches.
                            • Performance: the iframe embed supports `loading="lazy"`; `` loads when inserted.