none
Slider

    Question

  • Hey,

    Currently I have a slider on the homepage as a script editor webpart using the code below. Is there a way to achieve the same layout but pulling the data from a library instead? BTW this is in SharePoint online.

    <div id="carousel-top" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-top" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-top" data-slide-to="1"></li>
            <li data-target="#carousel-top" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner ">
            <div class="item active" style="border-top:none !important">
                <div class="row">
                    <div class="col-md-7">
                        <a href="#"><img src="/PublishingImages/slider-1.jpg" class="img-responsive" /></a>
                    </div>
                    <div class="col-md-5">
                        <div class="carousel-caption">
                            <h3>Engineering Excellence</h3>
                            <p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>
                            <a href="#" target="_blank"><img src="/PublishingImages/Readmore_button.png" /></a>
                        </div>
                    </div>
                </div>
            </div>
             <div class="item" style="border-top:none !important">
                <div class="row">
                    <div class="col-md-7">
                        <a href="#"><img src="/PublishingImages/slider-2.jpg" class="img-responsive" /></a>
                    </div>
                    <div class="col-md-5">
                        <div class="carousel-caption">
                            <h3>Above all, one standard</h3>
                            <p>Find out why our commitment to one high standard of safety and quality means we consistently deliver value</p>
                            <a href="#" target="_blank"><img src="/PublishingImages/Readmore_button.png" /></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item" style="border-top:none !important">
                <div class="row">
                    <div class="col-md-7">
                        <a href="#"><img src="/PublishingImages/slider-3.jpg" class="img-responsive" /></a>
                    </div>
                    <div class="col-md-5">
                        <div class="carousel-caption">
                            <h3>Local knowledge, global network</h3>
                            <p>Find out how our worldwide network of local experts allows us to efficiently manage global projects</p>
                            <a href="#" target="_blank"><img src="/PublishingImages/Readmore_button.png" /></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <a class="left carousel-control" href="#carousel-top" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-top" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    

    Any help will be greatly appreciated. 

    Many Thanks

    Tuesday, February 06, 2018 12:44 PM

Answers

  • Hi Ricky,

    This should work. 

    <script type="text/javascript">
    $(document).ready(function(){
         var listName = "Pictures";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      
         getListItems(listName, url, function (data) {
            var html=""; 
            var lihtml="";  
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
                  if(i==0)
                  {
    			//var description = item.Picture.Description;
    			html += '<div class="item active" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml = '<li data-target="#carousel-top" data-slide-to="0" class="active"></li>';
                  }
                  else{
                   html += '<div class="item" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml = '<li data-target="#carousel-top" data-slide-to="0"></li>';
                
                  }
            console.log(JSON.stringify(html));
           
            var x = data;
            console.log(JSON.stringify(data));
    		  }else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".carousel-inner").html(html);
            $(".carousel-indicators").html(lihtml);
            
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    <div id="carousel-top" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">       
        </ol>
    <div class="carousel-inner"></div>
    <!-- Left and right controls -->
       
          <a class="left carousel-control" href="#carousel-top" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-top" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>


    Ramakrishnan

    • Marked as answer by Rickyravi1980 Friday, February 09, 2018 3:04 PM
    Wednesday, February 07, 2018 3:57 PM
  • Hi Ricky,

    This should get the last three items created in the list along with the indicators.

    You can make changes to the query (as below) based on your requirement in future.

     url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$top=3&$orderby=Created desc",

    <script type="text/javascript">
    $(document).ready(function(){
         var listName = "Pictures";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      
         getListItems(listName, url, function (data) {
            var html=""; 
            var lihtml="";  
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
                  if(i==0)
                  {
    			//var description = item.Picture.Description;
    			html += '<div class="item active" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml += '<li data-target="#carousel-top" data-slide-to="'+i+'" class="active"></li>';
                  }
                  else{
                   html += '<div class="item" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml += '<li data-target="#carousel-top" data-slide-to="'+i+'"></li>';
                
                  }
            console.log(JSON.stringify(html));
           
            var x = data;
            console.log(JSON.stringify(data));
    		  }else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".carousel-inner").html(html);
            $(".carousel-indicators").html(lihtml);
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$top=3&$orderby=Created desc",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    <div id="carousel-top" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">       
        </ol>
    <div class="carousel-inner"></div>
    <!-- Left and right controls -->
       
          <a class="left carousel-control" href="#carousel-top" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-top" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    


    Ramakrishnan

    • Marked as answer by Rickyravi1980 Friday, February 09, 2018 3:04 PM
    Thursday, February 08, 2018 2:38 AM
  • Hi Ricky,

    There are many ways to get the URL of the item. Here is one of them:

    Construct the List dispform URL

    var webURL = _spPageContextInfo.webAbsoluteUrl;

    var listName = "Pictures";

    var listDispForm = webURL+"/lists/"+listName+"/dispform.aspx?ID=";

    The construct the html.
    html +=  '<a href='+listDispForm+item.ID+'>'+item.Title+'</a>';

    Please remember to mark the replies as answers if they helped.


    Ramakrishnan

    • Marked as answer by Rickyravi1980 Friday, February 09, 2018 3:04 PM
    Friday, February 09, 2018 2:52 PM
  • Hi Ricky,

    Yes, Its a hyperlink column and filter query cannot be applied.

    CAML query can be applied.

    url: "/_api/web/lists/getbytitle('Sponsors')/getitems"
    method: "POST",
    body: "{ 'query' : {'__metadata': { 'type': 'SP.CamlQuery' }, "ViewXml": "<View><Query><Where><BeginsWith><FieldRef Name='URL'/><Value Type='URL'>url</Value></BeginsWith></Where></Query></View>" } }",
    headers: {
        "accept": "application/json; odata=verbose",
        "content-type": "application/json; odata=verbose"
    }

    Kindly check these posts on how to filter hyperlink column in REST API using caml query-
    https://sharepoint.stackexchange.com/questions/224828/filter-hyperlink-field-url-using-sharepoint-rest-api/224829#224829


    https://sharepoint.stackexchange.com/questions/224828/filter-hyperlink-field-url-using-sharepoint-rest-api/224829#224829


    Ramakrishnan

    20 hours 44 minutes ago

All replies

  • Hi Ricky,

    Here is a sample code(tested in script editor webpart) to start with.

    Note: Library name considered "Pictures" & column name is URL along with Title, change it according to your need.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
         var listName = "Pictures";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      
         getListItems(listName, url, function (data) {
            var html=""; 
            var lihtml="";  
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
    			//var description = item.Picture.Description;
    			html += '<div class="item active" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
            console.log(JSON.stringify(html));
            lihtml = '<li data-target="#carousel-top" data-slide-to="0" class="active"></li>';
            var x = data;
            console.log(JSON.stringify(data));
    		  }else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".carousel-inner").html(html);
            $(".carousel-indicators").html(lihtml);
            
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    <div id="carousel-top" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">       
        </ol>
    <div class="carousel-inner"></div>
    <!-- Left and right controls -->
       
          <a class="left carousel-control" href="#carousel-top" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-top" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>


    Ramakrishnan

    Tuesday, February 06, 2018 4:37 PM
  • Hello,

    instead of writing scripts , you can use out-of-the box feature , use Content Query Webpart CQWP .

    1- copy itemstyle.xsl , ContentQueryMain.xsl files and renamed them to a custom name to make it unique.

    2- edit itemstyle.xsl and add the repeated div or li , in your case repeated section is 

     <div class="item" style="border-top:none !important">
                <div class="row">
                    <div class="col-md-7">
                        <a href="#"><img src="/PublishingImages/slider-2.jpg" class="img-responsive" /></a>
                    </div>
                    <div class="col-md-5">
                        <div class="carousel-caption">
                            <h3>Above all, one standard</h3>
                            <p>Find out why our commitment to one high standard of safety and quality means we consistently deliver value</p>
                            <a href="#" target="_blank"><img src="/PublishingImages/Readmore_button.png" /></a>
                        </div>
                    </div>
                </div>
            </div>

    3- edit ContentQueryMain.xsl .

    learn how to do it by using the following U

    https://www.codeproject.com/Articles/756834/Customizing-the-Content-Query-Web-Part-and-Item-St

    https://sergeluca.wordpress.com/2009/03/22/step-by-step-tutorial-using-the-content-query-web-part-enhanced-query-web-part-moss-2007/


    Best Regrads, Ahmed Madany MCTS @twitter http://twitter.com/ahmed_madany @Blog http://ahmedmadany.wordpress.com @LinkedIn http://eg.linkedin.com/pub/ahmed-madany/35/80/2b6

    Tuesday, February 06, 2018 6:24 PM
  • Hi Ramakrishnan,

    Thank you for taking your time to come back with a solution, I tried to implement your code, the image and the text are coming through fine, but the carousel doesn't seem to work instead the images are stacked one below the other. The only thing I removed from the code is the css and the js ref which I already have it in my site. Please see the updated code below, do you know where i'm going wrong. Thanks again for your help

    <script type="text/javascript">
    $(document).ready(function(){
         var listName = "Library";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      
         getListItems(listName, url, function (data) {
            var html=""; 
            var lihtml="";  
         
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
    			//var description = item.Picture.Description;
    
    	html += '<div class="item active" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="/PublishingImages/Readmore_button.png" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
    
            console.log(JSON.stringify(html));
            lihtml = '<li data-target="#carousel-top" data-slide-to="0" class="active"></li>';
            var x = data;
            console.log(JSON.stringify(data));
    		  }else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".carousel-inner").html(html);
            $(".carousel-indicators").html(lihtml);
            
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
           url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    <div id="carousel-top" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    </ol>
    <div class="carousel-inner"></div>
    <!-- Left and right controls -->
       
    <a class="left carousel-control" href="#carousel-top" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
      <a class="right carousel-control" href="#carousel-top" data-slide="next">
           <span class="glyphicon glyphicon-chevron-right"></span>
     </a>
     </div>



    • Edited by Rickyravi1980 Wednesday, February 07, 2018 1:41 PM Text update
    Wednesday, February 07, 2018 8:21 AM
  • Hi Ahmed,

    Thanks for your advice, I've never worked with Content Query Webparts before. Will give it a try this time and let your know.

    Many Thanks

    Wednesday, February 07, 2018 8:23 AM
  • Hi Ricky,

    This should work. 

    <script type="text/javascript">
    $(document).ready(function(){
         var listName = "Pictures";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      
         getListItems(listName, url, function (data) {
            var html=""; 
            var lihtml="";  
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
                  if(i==0)
                  {
    			//var description = item.Picture.Description;
    			html += '<div class="item active" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml = '<li data-target="#carousel-top" data-slide-to="0" class="active"></li>';
                  }
                  else{
                   html += '<div class="item" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml = '<li data-target="#carousel-top" data-slide-to="0"></li>';
                
                  }
            console.log(JSON.stringify(html));
           
            var x = data;
            console.log(JSON.stringify(data));
    		  }else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".carousel-inner").html(html);
            $(".carousel-indicators").html(lihtml);
            
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    <div id="carousel-top" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">       
        </ol>
    <div class="carousel-inner"></div>
    <!-- Left and right controls -->
       
          <a class="left carousel-control" href="#carousel-top" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-top" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>


    Ramakrishnan

    • Marked as answer by Rickyravi1980 Friday, February 09, 2018 3:04 PM
    Wednesday, February 07, 2018 3:57 PM
  • Hey Ramakrishnan,

    This one worked, yay!! Carousel Indicators dint seem to work, but that's not big deal. One last thing though, is there any way to pull just the latest three items from the list?

    Many Thanks

    Wednesday, February 07, 2018 5:56 PM
  • Hi Ricky,

    This should get the last three items created in the list along with the indicators.

    You can make changes to the query (as below) based on your requirement in future.

     url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$top=3&$orderby=Created desc",

    <script type="text/javascript">
    $(document).ready(function(){
         var listName = "Pictures";
    	 
         var url = _spPageContextInfo.webAbsoluteUrl;
      
         getListItems(listName, url, function (data) {
            var html=""; 
            var lihtml="";  
    	    for (var i = 0; i < data.d.results.length; i++) {  
              console.log(JSON.stringify(data.d.results[i]));
    	      var item = data.d.results[i];
    		  if(item.URL!=null){
                  if(i==0)
                  {
    			//var description = item.Picture.Description;
    			html += '<div class="item active" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml += '<li data-target="#carousel-top" data-slide-to="'+i+'" class="active"></li>';
                  }
                  else{
                   html += '<div class="item" style="border-top:none !important">';
                html += '<div class="row">';
                html +=    '<div class="col-md-7">';
                html +=        '<a href="#"><img src="'+item.URL.Url+'" class="img-responsive" /></a>';
                html +=    '</div>';
                html +=   ' <div class="col-md-5">';
                html +=       ' <div class="carousel-caption">';
                html +=            '<h3>'+item.Title+'</h3>';
                html +=            '<p>Find out how our extensive engineering capability allows us to solve complex technical challenges</p>';
                html +=            '<a href="#" target="_blank"><img src="'+item.URL.Url+'" /></a>';
                html +=        '</div>';
                html +=    '</div>';
                html += '</div>';
             html += '</div>';
              lihtml += '<li data-target="#carousel-top" data-slide-to="'+i+'"></li>';
                
                  }
            console.log(JSON.stringify(html));
           
            var x = data;
            console.log(JSON.stringify(data));
    		  }else{
    			html.push("<p>No Picture present</p>");
    		  }	        
    	    }
    	    $(".carousel-inner").html(html);
            $(".carousel-indicators").html(lihtml);
         }, function (data) {
             alert("Ooops, an error occured. Please try again");
         });
     });  
     function getListItems(listName, siteurl, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$top=3&$orderby=Created desc",
             method: "GET",
             headers: { "Accept": "application/json; odata=verbose" },
             success: function (data) {
                 success(data);
             },
             error: function (data) {
                 failure(data);
             }
         });
     }
    </script>
    
    <div id="carousel-top" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">       
        </ol>
    <div class="carousel-inner"></div>
    <!-- Left and right controls -->
       
          <a class="left carousel-control" href="#carousel-top" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-top" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    


    Ramakrishnan

    • Marked as answer by Rickyravi1980 Friday, February 09, 2018 3:04 PM
    Thursday, February 08, 2018 2:38 AM
  • Thanks Ram, I really appreciate it. Before I leave you in peace, one last thing, can you please tell me if its possible to link each slide to their respective item in the list?


    Thursday, February 08, 2018 9:58 AM
  • Hi Ricky,

    There are many ways to get the URL of the item. Here is one of them:

    Construct the List dispform URL

    var webURL = _spPageContextInfo.webAbsoluteUrl;

    var listName = "Pictures";

    var listDispForm = webURL+"/lists/"+listName+"/dispform.aspx?ID=";

    The construct the html.
    html +=  '<a href='+listDispForm+item.ID+'>'+item.Title+'</a>';

    Please remember to mark the replies as answers if they helped.


    Ramakrishnan

    • Marked as answer by Rickyravi1980 Friday, February 09, 2018 3:04 PM
    Friday, February 09, 2018 2:52 PM
  • That's great. Thanks for all your help, Ram.


    Friday, February 09, 2018 3:04 PM
  • Hi Ram,

    Sorry to bother you again, is there <g class="gr_ gr_100 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" data-gr-id="100" id="100">anyway</g> to show only the approved the items from the list?

    Thanks

    Sunday, February 18, 2018 1:10 PM
  • Hi Ricky,

    Yes, you can filter out the approve field from the REST API query

    /_api/web/lists/getbytitle('ListName')/items?$filter=<fieldName> eq <value>

    For Example -

    webURL+/_api/web/lists/getbytitle('ListName')/items?$filter=Approve eq 'Yes'




    Ramakrishnan

    Monday, February 19, 2018 3:20 PM
  • Hey Ram,

    Thanks for getting back, the column is actually the SharePoint Approval Status column, so this what I did but doesn't seem to work. I read somewhere that Approval Status acts as a lookup field and cant be used as a query, is that right?

    https://sparrowsgroup.sharepoint.com/business-support/marketing-and-communications/_api/web/lists/GetByTitle('In Brief News')/items?$filter=_ModerationStatus eq 'Approved'&$top=3&$orderby=Created desc"

    Thanks 


    Monday, February 19, 2018 3:32 PM
  • Hi Ricky,

    Yes, Its a hyperlink column and filter query cannot be applied.

    CAML query can be applied.

    url: "/_api/web/lists/getbytitle('Sponsors')/getitems"
    method: "POST",
    body: "{ 'query' : {'__metadata': { 'type': 'SP.CamlQuery' }, "ViewXml": "<View><Query><Where><BeginsWith><FieldRef Name='URL'/><Value Type='URL'>url</Value></BeginsWith></Where></Query></View>" } }",
    headers: {
        "accept": "application/json; odata=verbose",
        "content-type": "application/json; odata=verbose"
    }

    Kindly check these posts on how to filter hyperlink column in REST API using caml query-
    https://sharepoint.stackexchange.com/questions/224828/filter-hyperlink-field-url-using-sharepoint-rest-api/224829#224829


    https://sharepoint.stackexchange.com/questions/224828/filter-hyperlink-field-url-using-sharepoint-rest-api/224829#224829


    Ramakrishnan

    20 hours 44 minutes ago
  • That's great! Cheers, Ram
    20 hours 28 minutes ago
  • Hi Ricky,

    You can render HTMl similar to one you have posted using Client side Rendering (or JSLink) with default list views which are supported for all list web parts and  list forms from SP2013 onward. By making use of JSLink you can wrap required list data in HTML format required using PostRender method.

    You can refer: https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a for JSLink code samples.

    Let me know if you need further pointers.

    20 hours 12 minutes ago
  • Thanks, Maximus. Will check it out.
    19 hours 48 minutes ago