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 6, 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 9, 2018 3:04 PM
    Wednesday, February 7, 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 9, 2018 3:04 PM
    Thursday, February 8, 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 9, 2018 3:04 PM
    Friday, February 9, 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

    • Marked as answer by Rickyravi1980 Tuesday, February 20, 2018 3:10 PM
    Tuesday, February 20, 2018 2:55 PM

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 6, 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 6, 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 7, 2018 1:41 PM Text update
    Wednesday, February 7, 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 7, 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 9, 2018 3:04 PM
    Wednesday, February 7, 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 7, 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 9, 2018 3:04 PM
    Thursday, February 8, 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 8, 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 9, 2018 3:04 PM
    Friday, February 9, 2018 2:52 PM
  • That's great. Thanks for all your help, Ram.


    Friday, February 9, 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

    • Marked as answer by Rickyravi1980 Tuesday, February 20, 2018 3:10 PM
    Tuesday, February 20, 2018 2:55 PM
  • That's great! Cheers, Ram
    Tuesday, February 20, 2018 3:11 PM
  • 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.

    Tuesday, February 20, 2018 3:26 PM
  • Thanks, Maximus. Will check it out.
    Tuesday, February 20, 2018 3:51 PM