Maslosoft Framework Logo Maslosoft Framework Documentation
Flexible Application Foundation


Dynamically Updatable Carousel

Carousel can also be initialized by view model, to allow dynamic updating of slides. In this mode, carousel will update it's contents without page reload, just by changing view model properties.

To create knockout binded carousel, it must be initialized in different manner. Instead of passing parameters, there need to be passed single object of view model (for example CarouselVm).

Control form

Use this form to control some options of above carousel. Some options will not work with editable option active.

1:1
6:5
5:4
4:3
11:8
1.41:1
1.43:1
3:2
16:10
16.18:10
5:3
16:9
1.85:1
2.35:1
2.414:1
2.76:1
4:1

Code used for above result:

// 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'
	],
];
$vm = new CarouselVm();
$vm->items = $items;
$modelRef = Ko::bindModel($vm);
// Actual carousel initialization
$carousel = Carousel::widget([
			'vm' => $modelRef,
			'editable' => true,
		]);