Picture library slideshow using Client object model

Sharepoint Picture library slideshow using Client object model:

Note :

     Please add your CSS class and I unable to use  HTML tag. that why i have removed "<" simple

HTML Code : 
 div class="container">
            div class="row">
                div class="col-md-8 col-sm-8">
                    div id="carousel-main" class="carousel slide" data-ride="carousel">
                       
                        div class="carousel-wrapper">
div id="carousel-main" class="carousel slide" data-ride="carousel">
       
        ol class="carousel-indicators" id="carousel-indicators">
        /ol>
div id="SlideShowImg" class="carousel-image">

       
        div id="SlideShowText" class="carousel-inner" role="listbox">
       
        /div>      
        /div>
      /div>
                       
                        Previous Next
               
                /div>
                div class="col-md-4 col-sm-4">
                    div >
                        div class="widgets">
                            div class="widget-row"> span class="widget-title">My Team Sites
                           

img src="https://nabholz.sharepoint.com/SiteAssets/images/img2.png" alt=""> NabKnowledge

                            div class="widget-row"> span class="widget-title">Safety First
                       
                        div class="safety"> img src="https://nabholz.sharepoint.com/SiteAssets/images/SafetyTracker.png">
                 
                   
               
           
       
       

Javascript Code : 

SharePoint:scriptlink runat="server" Name="SP.js" Localizable="false" OnDemand="False" LoadAfterUI="True">
script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(ViewImgSlideShow, "sp.js");

var text = "";
var indicator = "";
var Active = 0;


function ViewImgSlideShow() {

  var siteUrl = _spPageContextInfo.siteServerRelativeUrl;


  var context = new SP.ClientContext(siteUrl);
  var web = context.get_web();
  var list = context.get_web().get_lists().getByTitle('Banners');

  //It will fetch all the items from the list
  var myquery = new SP.CamlQuery();

// If you need any filter option use Caml Query otherwise Remove this code :

  myquery.set_viewXml('View>Query>Where>Geq>FieldRef Name=\'ID\'/>' +
    'Value Type=\'Number\'>1
RowLimit>100');
  myItems = list.getItems(myquery);
  context.load(myItems);

  //If the items load correctly then success function will be called
  context.executeQueryAsync(Function.createDelegate(this, this.success_ViewImgSlideShow), Function.createDelegate(this, this.failed_ViewImgSlideShow));

}

function success_ViewImgSlideShow() {
  var ListEnumerator = this.myItems.getEnumerator();
  var aTxt;
  Active = 0;
  while (ListEnumerator.moveNext()) {
    var currentItem = ListEnumerator.get_current();
    if (Active == 0) {
      aTxt = "active";
    } else {
      aTxt = "";
    }
    text += "div class='item " + aTxt + "'>span id='imageItem_" + Active + "'>
img class='no' src='" + currentItem.get_item('FileRef') + "' />  ";
    Active += 1;
  }
}


function failed_ViewImgSlideShow(sender, args) {
  alert("failed. Message:" + args.get_message());
}
/script>

OutPut: