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
                            
                            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:
