Components

Carousel Component

Make

The Carousel component allows you to create image carousel.

You can create a Carousel using the static method make() class Carousel.

make(
    Closure|string $alt = '',
    Closure|string|array $items = '',
    Closure|boolean $portrait = false
)
make(
    Closure|string $alt = '',
    Closure|string|array $items = '',
    Closure|boolean $portrait = false
)
  • $alt - attribute holds a textual replacement for the image,
  • $items - images,
  • $portrait - portrait orientation
use MoonShine\Components\Carousel;
 
//...
 
public function components(): array
{
    return [
        Carousel::make(
            alt: fake()->sentence(3),
            items: ['/images/image_2.jpg','/images/image_1.jpg'],
            portrait: false
        )
    ];
}
 
//...
use MoonShine\Components\Carousel;
 
//...
 
public function components(): array
{
    return [
        Carousel::make(
            alt: fake()->sentence(3),
            items: ['/images/image_2.jpg','/images/image_1.jpg'],
            portrait: false
        )
    ];
}
 
//...

2 1

Images

To add an images carousel to a card, you can use the items() method.

items(Closure|string|array $value)
items(Closure|string|array $value)
  • $value - url of the image or array urls of image or 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'])

2 1

Portrait orientation

To use a carousel with vertical images, add a parameter portrait: true to make() method.

bool portrait = false
bool portrait = false
Carousel::make(
    alt: fake()->sentence(3),
    portrait: true
)
->items(['/images/image_2.jpg','/images/image_1.jpg'])
Carousel::make(
    alt: fake()->sentence(3),
    portrait: true
)
->items(['/images/image_2.jpg','/images/image_1.jpg'])

1 2