Перейти к контенту
Orchid Images v2.x

Компонент Carousel

Использование

Компонент Carousel основан на Bootstrap компоненте и выглядит так же.

Идентично Gallery, нужно определить отношения или передать картинки в метод elements().

use Czernika\OrchidImages\Screen\Components\Carousel;


Carousel::make('post.gallery'),

Опции

Опции отличаются от галереи - слайдер не принимает такие методы, как columns - показывается только один слайд, однако дополнительно используется пара методов, связанных с Bootstrap Carousel API.

Элементы управления

Вы можете использовать кнопки управления (пред-след слайд) или индикаторы (буллеты) со следующими методами:

Carousel::make('post.gallery')
    ->withControls()
    ->withIndicators(),

Вписываемость

Смотри fit property для Gallery.

Пустое значение

Смотри empty value для Gallery.

Элементы

Смотри element для Gallery.

Размер

Можно указать размер галереи. По-умолчанию, она имеет высоту картинки внутри.

Carousel::make('post.gallery')
    ->height(400), // теперь карусель и все слайды внутри имеют высоту 400px

Методы принимает любые валидные значения CSS в качестве параметра.

Carousel::make('post.gallery')
    ->height('50vh'),

Анимация

Если нужно применить анимацию появления, используйте метод fade()

Carousel::make('post.gallery')
    ->fade(),

Использование вместе с Lightbox

По-умолчанию, вы не можете увеличить изображения внутри карусели. Если такое поведение требуется, вы можете скомбинировать ее с лайтбоксом.

Carousel::make('post.gallery')
    ->withLightbox(),

This will allow you to convert simple Carousel into a Carousel with Lightbox, where every image can be opened in gallery mode.

Интервал анимации

Укажите интервал между сменами слайдов в миллисекундах.

Carousel::make('post.gallery')
    ->delay(10000) // 10 секунд

По-умолчанию 5000мс (5 секунд).

Максимальная ширина карусели