Carousel Component

Usage

The Carousel component is based on the Bootstrap carousel and looks alike.

Identical to Gallery you need to register relations or pass elements manually via the elements() method.

use Czernika\OrchidImages\Screen\Components\Carousel;

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

Caution

You need to register carousel.js file in order to work.

config/platform.php

'resource' => [
    'stylesheets' => [
        '/vendor/orchid-images/css/image.css',
    ],

    'scripts' => [
        '/vendor/orchid-images/js/carousel.js', // here
    ],
],

Options

The options differ from Gallery; it does not accept layout parameters such as columns - there is only one slide per view but it accepts some options from the Bootstrap Carousel API.

Control elements

You may use control buttons (prev-next slide) or indicators (bullets) with next methods:

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

Fit property

See fit property for Gallery.

Empty value

See empty value for Gallery.

Elements

See element for Gallery.

Size

You can specify the height of the gallery. By default, it stretches as much as the highest image in the carousel.

Carousel::make('post.gallery')
    ->height(400), // carousel and every slide within will have 400px height

Accepts any valid CSS units as a string parameter.

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

Animation

If you wish to use fade animation use the fade() method

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

Combine with Lightbox

By default, you cannot zoom image in a carousel. But if you wish, you may combine it with 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.

Interval

Specify the interval between slide changes in milliseconds.

Carousel::make('post.gallery')
    ->delay(10000) // 10 seconds

Default is 5000ms (5 seconds).

Layout max width

Caution

In development