SmartUI::Carousel Class

This is a basic usage of SmartUI's Carousel class. If you want to know more about the real HTML layout, click here

SmartUI::Carousel($items [, $style = 'slide', $options = array()])

$items

The $items parameter will initiate the number of items displayed in the carousel. You can pass either an assoc array that contains item names or just an array.

$items = array(
	ASSETS_URL."/img/demo/m3.jpg",
	ASSETS_URL."/img/demo/m1.jpg",
	ASSETS_URL."/img/demo/m2.jpg",
);

// or ...
$items = array(
	'item1' => ASSETS_URL."/img/demo/s1.jpg",
	'item2' => array(
		'img' => ASSETS_URL."/img/demo/s2.jpg",
		'caption' => 
			'<h4>S2 Background Image</h4>
			<p>
				Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
			</p>
			<br>
			<a href="javascript:void(0);" class="btn btn-info btn-sm">Read more</a>'
	),
	'item3' => array(
		'img' => array(
			'src' => ASSETS_URL."/img/demo/s3.jpg",
			'alt' => 'This is s3 image'
		)
	)
)

Setup



$items = array(
	ASSETS_URL."/img/demo/m3.jpg",
	ASSETS_URL."/img/demo/m1.jpg",
	ASSETS_URL."/img/demo/m2.jpg",
);

$carousel = $_ui->create_carousel($items);

Usage

$carousel->caption(0, '<h4>Title 1</h4>
	<p>
		Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
	</p>
	<br>
	<a href="javascript:void(0);" class="btn btn-info btn-sm">Read more</a>'
);

If you passed the items array with no specified keys, you'l use the array's indexes instead to set caption, active, etc.

$carousel->caption(0, ...); // we specify item #0's caption property

Print it!

$carousel->print_html();

Property Reference

Below are the list of available properties for the class:

Carousel::item

An array - The list of items (provided upon creation of SmartUI::Carousel)

$carousel->item(0, array('img' => ASSETS_URL."/img/demo/m3.jpg", 'caption' => 'this is the caption ...'));

// or ...
$carousel->item(0, ASSETS_URL."/img/demo/m3.jpg"); // we set the image only for item #0

Carousel::id

A string - ID attribute of your carousel instance

Carousel::active

An array - List of items and their active property

$carousel->active(1, true); // set's item #1 to be the first active item

Carousel::caption

An array - List of items and their caption property

$carousel->caption(0, 'This is the content of item #0');

Carousel::img

An array - List of items and their img property. The img property may contain string or array.

$img_property = array(
	'src' => '',
	'alt' => ''
);

// sample call ...
$carousel->img(0, ASSETS_URL."/img/demo/my_new_image.jpg"); // set as string, directed to the img's src property

// or ...
$carousel->img(0, array( // by using array
	'src' => ASSETS_URL."/img/demo/my_new_image.jpg",
	'alt' => 'This is the alt attribute of the image'
));

Carousel::options

An array - Available options of the class

$options = array(
	'style' => 'slide', // default
	'controls' => array('<span class="glyphicon glyphicon-chevron-left"></span>', '<span class="glyphicon glyphicon-chevron-right"></span>') // default
);

// sample call ...
$carousel->options('controls', false) // we remove the controls!
	->options('style', 'fade') // change animation style to fade!

3.6 KiB Raw Blame History