Thumbnail in EJ 1 ASP.NET MVC Rotator
8 Aug 2017 / 2 minutes to read
This feature implements Thumbnail in Rotator control. You can view or access any of the Rotator items instantly. All the images are given as Thumb Element to use this feature.
The property ShowThumbnail is Boolean type, which allow us to Show or Hide the Thumbnail in Rotator control. Thumbnail is used to navigate between slides. Thumbnail supports only single slide transition. You must specify the source for thumbnail elements through the ThumbnailSourceID property. The default value is ‘false’.
The property ThumbnailSourceID specifies the source for thumbnail elements. The default value is null. The value set to this property is object.
You can refer the following code example of Thumbnail in Rotator.
<ul id="slide" style="display: none">
<li>
<img src="@Url.Content("~/Images/rotator/green.jpg")" title="Green" /></li>
<li>
<img src="@Url.Content("~/Images/rotator/snow.jpg")" title="Snow" /></li>
<li>
<img src="@Url.Content("~/Images/rotator/wheat.jpg")" title="Wheat" /></li>
<li>
<img src="@Url.Content("~/Images/rotator/tablet.jpg")" title="Tablet" /></li>
<li>
<img src="@Url.Content("~/Images/rotator/sea.jpg")" title="Sea" /></li>
<li>
<img src="@Url.Content("~/Images/rotator/bread.jpg")" title="Bread" /></li>
</ul>
@Html.EJ().Rotator("sliderContent").Items(itemElement =>
{
itemElement.Add().ContentTemplate(@<div>
<img class="image" src="@Url.Content("~/Images/rotator/green.jpg")" />
</div>);
itemElement.Add().ContentTemplate(@<div>
<img class="image" src="@Url.Content("~/Images/rotator/snow.jpg")"/>
</div>);
itemElement.Add().ContentTemplate(@<div>
<img class="image" src="@Url.Content("~/Images/rotator/wheat.jpg")" />
</div>);
itemElement.Add().ContentTemplate(@<div>
<img class="image" src="@Url.Content("~/Images/rotator/tablet.jpg")" />
</div>);
itemElement.Add().ContentTemplate(@<div>
<img class="image" src="@Url.Content("~/Images/rotator/sea.jpg")" />
</div>);
itemElement.Add().ContentTemplate(@<div>
<img class="image" src="@Url.Content("~/Images/rotator/bread.jpg")" />
</div>);
}).SlideWidth("600px").SlideHeight("350px").ShowThumbnail(true).ThumbnailSourceID("slide")
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page