I am having trouble having the jQuery to fetch the images from the Picture Library in SharePoint and display on bootstrap carousel. I'm very new to this functionality using jQuery and I think I am not doing right and also I do not understand how to find out the value for 'listName' setting. Again, I set index to 0 for the first slide to include 'active' in css class but the rest of the indices will not have the 'active' class. Like I said, I'm new and aiming to shoot for the stars. Here's my code:

<title>Carousel Test</title>
<link type="text/css" rel="stylesheet" href="/div/NPCIS/intranet/SlideShowPrototype/SiteAssets/css/bootstrap.min.css">
<script type="text/javascript" src="/div/NPCIS/intranet/SlideShowPrototype/SiteAssets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/div/NPCIS/intranet/SlideShowPrototype/SiteAssets/js/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript" src="/div/NPCIS/intranet/SlideShowPrototype/SiteAssets/js/bootstrap.min.js"></script>

<script type="text/javascript">

            operation: "GetListItems",
            async: false,
            listName: "Pictures",
            completefunc: function (xData, Status) {
                var index = 0;
                var hasRows = false;
                $(xData.responseXML).find("z\\:row, row").each(function(){

                    hasRows = true;
                    var _url = '/' + $(this).attr("ows_RequiredField");

                    if (index > 0) {
                        _slideDiv = $("<div class='item'/>");
                        _Image = $("<img src='" + _url + "' width='690' height='400'>");                    
                        _slideDivEnd = $("</div>");     
                    } else {
                        _slideDiv = $("<div class='item active'>");
                        _Image = $("<img src='" + _url + "' width='690' height='400'>");    
                        _slideDivEnd = $("</div>");             

                    index = index + 1;






    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner" role="listbox">

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
            <span class="sr-only">Previous</span>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
            <span class="sr-only">Next</span>


  • .find("z\\:row, row") isn't ideal, you should be using SPFilterNode, spservices.codeplex.com/wikipage?title=$().SPFilterNode May 27 '16 at 17:16
  • I would use the most recent release of SPServices (2014.02). The ability to use AJAX promises can keep the Carousel code from running until you've gotten all the rows back from SPServices. As for listName, you use the "friendly name" of your list, which shows under View All Site Content. If your list's name is My Pictures, then it's listName: "My Pictures",
    – Erin L
    May 27 '16 at 18:18

The solution that Erin is fully explained in this blog post. It is using the SPServices to query the Picture Library and Bootstrap Carousel to render. The other option that I used in a very recent project was the solution provided in Sharegate web site and I do think it is a more robust solution since it is using Content Search Web part with a custom display template. I just followed the instruction on the post and It was up and running and looks awesome.

  • thanks - I have not had much luck getting this to work. I'm currently using SharePoint 2010. Again, thanks.
    – Marc
    Jun 1 '16 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.