Maslosoft Framework Documentation
Flexible Application Foundation
Carousel
Carousel is a kind of slide show, which can contain text, or images with
optional caption. It's items can contain
title
,
caption
and
content
HTML formatted elements and optionally
image
which provides background
image for slides. As image in slide is background, thus any text or HTML
can be placed above it (content
).
Carousel with default options and some generated content. First slide contains content parts named similarly to it's configuration options, so it is easier to understand where item configuration will appear.
Code used for above carousel
// We'll reuse items in next examples $items = [ [ 'title' => 'Title', 'caption' => 'Caption', 'content' => 'Content', 'image' => 'one.jpg', // Background image for slide 'url' => '/' // Url on whole slide click ], [ 'title' => $title[1], 'caption' => $caption[1], 'content' => $content[1], 'image' => 'two.jpg' ], [ 'title' => $title[2], 'caption' => $caption[2], 'content' => $content[2], 'image' => 'three.jpg' ], ]; // Actual carousel initialization $carousel = Carousel::widget([ 'items' => $items ]);
Carousel is fully responsive, to set it's height proportions
parameter can be used. This will constrain height of carusel, based on width,
just like your display proportions.
To display it in classic style, set classic
to true.
Classic style will add semi-transparent black background for
title
and caption
.
Code used for carousel with different proportions
and classic
style.
// Carousel with proportions and with classic theme $carousel2 = Carousel::widget([ 'proportions' => '16:9', 'classic' => true, 'items' => $items ]);