21.12 Embedded Objects - Slide Show

Media slideshow over a list of div(s) supporting mobile swipe. For example,


	<object xmlns="http://www.cmobilecom.com/af/objects"
			id="slideshow1" type="slideshow">

		<widgetVar>imageSlider</widgetVar>
		<effectSpeed>500</effectSpeed>
		<speed>5000</speed>
		<autoplay>true</autoplay>
		<width>100%</width>
		<height>240px</height>

		<div class="ui-slide">
			<img src="/images/image1.png" />
			<div>This is image 1</div>
		</div>

		<div class="ui-slide">
			<img src="/images/image2.png" />
			<div>This is image 2</div>
		</div>

		<div class="ui-slide">
			<img src="/images/image3.png" />
			<div>This is image 3</div>
		</div>
	</object>

Slide div(s) need to have class ui-slide, and they can contain any well-formed XHTML elements or text.

From javascript, the following methods can be called from slideshow widget (widgetVar: imageSlider in the example above).

	previous() : previous slide.
	next(): next slide.
	slideTo(index): show the slide at the index (starting from 0).
	start(): start slideshow.
	stop(): stop slideshow.
	toggle(): toggle(start/stop) slideshow.

For example, add Previous and Next commands to move slides.


	<a href="javascript:void();" onclick="Cmobilecom.widgets.imageSlider.previous();return false;">Previous</a>
	<a href="javascript:void();" onclick="Cmobilecom.widgets.imageSlider.next();return false;">Next</a>

← Embedded Objects: FTP→ Embedded Objects: Inline TextFrames / No Frames