Slide

A slide displays text on top of a background image but its main purpose is to be used inside carousels and slideshows.

Internally, a slide with an image will be sized to match exactly the picture, though the image will be scaled down if it would take more than the width available to the slide.

Preview

Slide title

• Descriptive text 1
• Descriptive text 2
• Descriptive text 3
• Descriptive text 4

HTML

<x-slide class="rounded-box" index="0" image="/assets/seasons/large/autumn.webp">
  <span class="p-4 text-white text-5xl justify-self-center self-start font-normal">Slide title</span>
  <div class="p-4 text-white text-2xl justify-self-end self-center">
	<ul>
	  <li>Descriptive text 1</li>
	  <li>Descriptive text 2</li>
	  <li>Descriptive text 3</li>
	  <li>Descriptive text 4</li>
	</ul>
  </div>
</x-slide>

#Slide without image

While it may seem there would never be a need for a slide without image, slides allow to skip some of the code required to make carousel and slideshow container work. If said containers are not to display pictures, it is still useful to embed slides inside them, in which case the slides will not contain an image.

When a slide does not contain an image, its size is driven by its text content.

<x-slide class="bg-base-100 border-1 border-info">
  This is a slide without image. It is only as big as the text it contains.
</x-slide>