Adding Data

Slides can contain specific data that are required by other slider parts, like UI controls. These contents are not visible over the slides, since they will be stored and removed from slides by Master Slider. In this article, you can find out how to define each slide data content.

Thumbnail

To set thumbnail for the slide, you need to define the thumbnail image by an img tag and ms-thumbnail class name as the direct child element of slide.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- ... -->
			<img class="ms-thumbnail" src=".../path/to/thumbnail.jpg" alt="" />
			<!-- ... -->
		</div>
		<!-- .... -->
	</div>

Slide title

To set a title for the slide, you can add it with any HTML element type as a direct child element of the slide with ms-title class name.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- ... -->
			<h2 class="ms-title">Lorem ipsum dolor sit amet.</h2>
			<!-- ... -->
		</div>
		<!-- .... -->
	</div>

Slide info

Slide info describes the slide. To add this content to the slide, you can define it by any HTML element as the direct child element of slide with ms-info class name.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- ... -->
			<p class="ms-info">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quo esse, dolor doloremque! Ab harum aut optio pariatur atque, ratione suscipit voluptatem non ipsa alias, laboriosam cupiditate voluptatum aliquam repellat!
			</p>
			<!-- ... -->
		</div>
		<!-- .... -->
	</div>