Components

Carousel

Basics

The Carousel component allows you to create an image carousel.

make(
   Closure|array $items = [],
   Closure|bool $portrait = false,
   Closure|string $alt = ''
)
make(
   Closure|array $items = [],
   Closure|bool $portrait = false,
   Closure|string $alt = ''
)
  • $items - images,
  • $portrait - portrait orientation,
  • $alt - an attribute containing alternative text for the image.
use MoonShine\UI\Components\Carousel;
 
Carousel::make(
    items: ['/images/image_2.jpg', '/images/image_1.jpg'],
    alt: fake()->sentence(3)
)
use MoonShine\UI\Components\Carousel;
 
Carousel::make(
    items: ['/images/image_2.jpg', '/images/image_1.jpg'],
    alt: fake()->sentence(3)
)
<x-moonshine::carousel
    :items="['/images/image_2.jpg','/images/image_1.jpg']"
    :alt="fake()->sentence(3)"
/>
<x-moonshine::carousel
    :items="['/images/image_2.jpg','/images/image_1.jpg']"
    :alt="fake()->sentence(3)"
/>

Items

To add an image carousel, you can use the items() method.

items(Closure|array $value)
items(Closure|array $value)
  • $value - an array of image URLs or a closure.
Carousel::make(
    alt: fake()->sentence(3),
)
    ->items(['/images/image_2.jpg','/images/image_1.jpg'])
Carousel::make(
    alt: fake()->sentence(3),
)
    ->items(['/images/image_2.jpg','/images/image_1.jpg'])