Компоненты

Компонент Carousel

Создание

Компонент Carousel позволяет создавать карусель изображений.

Вы можете создать Carousel, используя статический метод make() класса 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 - атрибут, содержащий текстовую замену изображения,
  • $items - изображения,
  • $portrait - портретная ориентация.
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
        )
    ];
}
 
//...

Изображения

Чтобы добавить карусель изображений, вы можете использовать метод items().

items(Closure|string|array $value)
items(Closure|string|array $value)
  • $value - url изображения или массив url изображений, или замыкание.
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'])

Портретная ориентация

Чтобы использовать карусель с вертикальными изображениями, добавьте параметр portrait: true в метод make().

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'])