Template
The Rotator control provided the template support for having a customized appearance. Instead of having the same look for the rotator we can use our desired templates by using the e-template property.
You can refer the following code example to give the template for the rotator.
<div class="control">
<ul id="sliderContent" ej-rotator e-datasource="dataList" e-slidewidth="600px" e-slideheight="223px" e-enableautoplay="true" e-animationspeed="1200" e-showplaybutton="true" e-template="mytemplate"/>
</div>
<script>
var empList = [
{ text: "Louis", color: "#43BDC2", eimg: "03", desig: "Representative", country: "England" },
{ text: "Silivia", color: "#80C344", eimg: "04", desig: "Representative", country: "Norway" },
{ text: "Linden", color: "#F68A3F", eimg: "05", desig: "Representative", country: "Australia" },
{ text: "Lawrence", color: "#E4BF21", eimg: "06", desig: "Representative", country: "India" }
];
angular.module('rotatApp', ['ejangular']).controller('RotatCtrl', function ($scope) {
$scope.dataList = empList,
$scope.mytemplate = '<div style="background-color:${color}; height:300px"> <div style="padding: 32px 10px 20px 40px"> <img class="eimgs" src="../images/rotator/${eimg}.png" alt="employee" height="159px" width="159px"/> </div>' + '<div style="padding: 0 100px 0 250px"><div class="ename"> ${text} </div> <div class="desig"> ${desig} </div><div class="cont"> ${country} </div></div></div>';
});
</script>
<style type="text/css" class="cssStyles">
.eimgs {
border-radius: 50%;
background-color: #DDDDDD;
float: left;
}
.ename {
font-family: segoe UI;
font-weight: bold;
font-size: 20px;
padding-top: 10px;
color: white;
}
.desig {
font-family: segoe UI;
font-size: 14px;
opacity: 0.8;
color: white;
padding-bottom: 3px;
}
.cont {
font-family: segoe UI;
font-size: 14px;
padding-top: 3px;
border-top: 1px solid white;
}
</style>
Providing template for each slide
The property e-templateid enables to bind multiple customized template items in Rotator. Hence we set the different template for each slide of rotator.
<ul id="sliderContent" ej-rotator e-slidewidth="470px" e-slideheight="350px" e-showpager="true" e-templateid="mytemplateid">
</ul>
<script id="tt1" type="text/x-jsrender">
<div id="t1">
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/sea.jpg" title="Snowfall" />
</div>
</script>
<script id="tt2" type="text/x-jsrender">
<div id="t2">
<video width="472" height="350" controls style="margin-left: -2px;">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</script>
<script id="tt3" type="text/x-jsrender">
<div id="t3" style="height:400px">
<audio style="width:468px;margin-top:120px;" controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
</script>
<script id="tt4" type="text/x-jsrender">
<div id='text4' style="background-color:lightgray; margin-top:-20px; height:370px">
<div id="t4" class="text">
<p><h2> World best mobile phones </h2></p>
</div>
<ul class="text1">
<li><h4> Apple iPhone 6S </h4></li>
<li><h4> Samsung Galaxy S7Edge </h4></li>
<li><h4> Oneplus 3 </h4></li>
<li><h4> HTC 10 </h4></li>
<li><h4> LG G5 </h4></li>
<li><h4> Google Nexus 6P </h4></li>
<li><h4> Apple iPhone SE </h4></li>
<li><h4> Sony Z5 Premium </h4></li>
<li><h4> Motorola Moto X Force </h4></li>
</ul>
</div>
</script>
<script id="tt5" type="text/x-jsrender">
<div id="t5">
<div class="leftPanel">
<img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" title="nature" />
</div>
<div class="rightPanel rightSide">
<div class="contentPanel" style="color:yellow"><b>Tablet</b> </div>
<ul>
<li>A tablet computer, or simply tablet, is a mobile computer with display, circuitry and battery in a single unit.</li>
<li>
Tablets are equipped with sensors, including cameras, microphone, accelerometer and touchscreen.
</li>
</ul>
</div>
</div>
</script>
<script>
angular.module('rotatApp', ['ejangular']).controller('RotatCtrl', function ($scope) {
$scope.mytemplateid = ['tt1', 'tt2', 'tt3', 'tt4', 'tt5'];
});
</script>