Maslosoft Framework Logo 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
		]);