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.

  • html
  • <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>
  • js
  • <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>
  • css
  • <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.

  • html
  • <ul id="sliderContent" ej-rotator e-slidewidth="470px" e-slideheight="350px" e-showpager="true" e-templateid="mytemplateid">                      
                        </ul>
  • js
  • <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>