Stack

Similar to a tabs component, <x-stack> displays one of its several children. However, <x-stack> is intended to pick which of its children it shows not by user interaction but with javascript.
In most cases, the child chosen to be displayed is determined on page load and does not change afterward, which is why <x-stack> is optimized to avoid loading external resources (images, videos, ...) unless for the displayed child.

This stack container... ...changes the displayed slide... ...every 2.5seconds... ...automatically.

<x-stack x-data="{
	index : 0,
	init () {
		setInterval(() => this.index = (this.index + 1) % 4, 2500);
	}
}">
	<span x-show="index === 0">
		This stack container...
	</span>
	<span x-show="index === 1">
		...changes the displayed slide...
	</span>
	<span x-show="index === 2">
		...every 2.5seconds...
	</span>
	<span x-show="index === 3">
		...automatically.
	</span>
</x-stack>

#Examples

#Theme-bound stack

The below stack shows a rotating earth video that changes when switching from light to dark mode and back.

Welcome

In this example, the stack controls which version of earth, day or night, is displayed (wide screens only).

While some adjustments are required to make them coincide, the heavy work of loading each of the 2 videos (8MB total) only when shown on screen is done by the stack.

The stack listens to the data-theme-changed event to do the swap, which is when the video that was previously hidden is requested from the server.

<x-stack class="relative aspect-2/1 overflow-hidden border-1 border-base-content rounded p-4"
  x-data="{ day: (localStorage.getItem('data-theme') === 'light') }"
  @data-theme-changed.window="day = !day"
>
  <style>
	.rotating-earth-dark {
	  -webkit-mask-image:radial-gradient(circle,black 41.4%,transparent 41.6%);
	  mask-image: radial-gradient(circle,black 41.4%,transparent 41.6%);
	  scale: 1.125;
	  width: 100%;
	}
	.rotating-earth {
	  -webkit-mask-image:radial-gradient(circle,black 46.7%,transparent 46.85%);
	  mask-image: radial-gradient(circle at 49.75% 50.25%,black 46.1%,transparent 46.3%);
	  width: 100%;
	}
  </style>
  <div class="md:max-w-[55%]">
	<span class="text-2xl">Welcome</span>
	<p>In this example, the stack controls which version of earth, day or night, is displayed (wide screens only).</p>
	<p>While some adjustments are required to make them coincide, the heavy work of loading each of the 2 videos (8MB total) only when shown on screen is done by the stack.</p>
	<p>The stack listens to the <code>data-theme-changed</code> event to do the swap, which is when the video that was previously hidden is requested from the server.
  </div>
  
  <x-stack-element class="absolute -right-[35%] -top-[15%] w-full max-md:hidden pointer-events-none" x-if="day">
	<div aria-hidden="true" class="earth-video">
	  <video autoplay="" loop="" muted="" playsinline="" class="rotating-earth"><source src="/assets/stock/rotating_earth.webm"></video>
	</div>
  </x-stack-element>
  
  <x-stack-element class="absolute -right-[35%] -top-[15%] w-full max-md:hidden pointer-events-none" x-if="!day">
	<div aria-hidden="true" class="earth-video">
	  <video autoplay="" loop="" muted="" playsinline="" class="rotating-earth-dark"><source src="/assets/stock/rotating_earth_night.webm"></video>
	</div>
  </x-stack-element>
  
</x-stack>