Kodza
Browse · 108

Fullscreen Slider

Full-bleed slides that change with a curtain while the title rises from a mask. Horizontal or vertical, buttons, arrow keys and swipe. No GSAP.

View the code Ask your AI
Media No dependencies slidercarouselfullscreenimage Added Oct 2025
/anim/slider-horizontal-fullscreen/ Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Make my homepage hero a Kodza Fullscreen Slider.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.
kodza-slider-horizontal-fullscreen.html 
<section class="kodza-slider" aria-roledescription="carousel" aria-label="Kodza slides">
  <div class="kodza-slider__slides">
    <figure class="kodza-slider__slide">
      <img src="https://kodza.dev/media/kz-columns-2400.webp" alt="A row of square concrete pillars under a flat roof, casting striped shadows" />
      <figcaption>
        <h2 class="kodza-slider__title">repeat(7, 1fr)</h2>
        <p class="kodza-slider__text">Grid layout, 1968 edition.</p>
      </figcaption>
    </figure>
    <figure class="kodza-slider__slide">
      <img src="https://kodza.dev/media/kz-steps-2400.webp" alt="A concrete staircase that climbs nine steps and stops in mid-air" loading="lazy" />
      <figcaption>
        <h2 class="kodza-slider__title">transition: steps(9)</h2>
        <p class="kodza-slider__text">Goes up. Goes nowhere. Ships anyway.</p>
      </figcaption>
    </figure>
    <figure class="kodza-slider__slide">
      <img src="https://kodza.dev/media/kz-float-2400.webp" alt="A concrete block hovering above the ground, over its own shadow" loading="lazy" />
      <figcaption>
        <h2 class="kodza-slider__title">position: absolute</h2>
        <p class="kodza-slider__text">Out of the flow, and loving it.</p>
      </figcaption>
    </figure>
    <figure class="kodza-slider__slide">
      <img src="https://kodza.dev/media/kz-arch-2400.webp" alt="A concrete wall with a round-topped opening, sunlight pouring through it onto the ground" loading="lazy" />
      <figcaption>
        <h2 class="kodza-slider__title">border-radius: 50%</h2>
        <p class="kodza-slider__text">Even concrete has a soft side.</p>
      </figcaption>
    </figure>
  </div>
  <div class="kodza-slider__bar">
    <span class="kodza-slider__count"><b>01</b> / 04</span>
    <div class="kodza-slider__nav">
      <button type="button" data-dir="-1" aria-label="Previous slide"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3L5 8l5 5" /></svg></button>
      <button type="button" data-dir="1" aria-label="Next slide"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5" /></svg></button>
    </div>
  </div>
</section>

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed
Light and darkThe same checks on both themes, contrast included. Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
Over the slider, or focus inside
  • Next or previous slide, round and round→/←
Over a vertical slider, or focus inside
  • Next or previous slide, round and round↓/↑

More like this

More in Media

See all Media Request a component