SharePoint Carousel Example

This SharePoint tutorial explains a SharePoint Carousel Example. We will see an image slider where we will read the images from a SharePoint document library. The same image slider code will work on SharePoint Online as well as SharePoint 2013/2016.

In one of my previous tutorial we also saw an example, we saw an example on SharePoint Online Image Slider or Carousel Example. But the image path was hardcoded in that example. Here in this SharePoint Carousel Example, the images are dynamic. The images are stored inside a document library in SharePoint Online.

SharePoint Carousel Example

Below is the image slider code, which you need to add inside a script editor web part on a SharePoint page.

Here the images are stored inside a SharePoint Online document library. Also, the document library has one Description column which we are using to display the caption in the images slider.

This is how the document library looks like:

SharePoint Carousel Example
SharePoint Carousel Example

The suggestion here is to fix the image width, so that the SharePoint Carousel images will appear correctly.

Below is the full code:

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<style>
  * {box-sizing: border-box;}
  body {font-family: Verdana, sans-serif;}
  .mySlides {display: none;}
  img {vertical-align: left;}
  
  /* Slideshow container */
  .slideshow-container {
    
    position: relative;
    margin: auto;
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: left;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 25%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }
  </style>
  
  <div class="slideshow-container">
  
  <div class="mySlides fade">
    <div class="numbertext">1 / 5</div>
    <img id="img1" style="width:40%" height="200">
    <div class="text"><p id="desc1"></p></div>
    
  </div>
  
  <div class="mySlides fade">
    <div class="numbertext">2 / 5</div>
    <img id="img2" style="width:40%" height="200">
    <div class="text"><p id="desc2"></p></div>
    
  </div>
  
  <div class="mySlides fade">
    <div class="numbertext">3 / 5</div>
    <img id="img3"  style="width:40%" height="200">
    <div class="text"><p id="desc3"></p></div>
    
  </div>
  
  <div class="mySlides fade">
    <div class="numbertext">4 / 5</div>
    <img id="img4"  style="width:40%" height="200">
    <div class="text"><p id="desc4"></p></div>
    
  </div>
  
  <div class="mySlides fade">
    <div class="numbertext">5 / 5</div>
    <img id="img5"  style="width:40%" height="200">
    <div class="text"><p id="desc5"></p></div>
    
  </div>
  
  </div>
  <br>
  
  <div style="text-align:left">
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <!-- Slideshow container -->
  
  <script>
  var slideIndex = 0;
  showSlides();
  
  function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";  
      }
      slideIndex++;
      if (slideIndex > slides.length) {slideIndex = 1}    
      for (i = 0; i < dots.length; i++) {	
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " active";
      setTimeout(showSlides, 2000); // Change image every 4 seconds
  }
</script>
  <script type="text/javascript" > 
    function LoadImages(){
        $.ajax({
                url: _spPageContextInfo.webServerRelativeUrl + 
                "/_api/web/lists/getByTitle('imageSliderLib')/Items?$select=Title,FileLeafRef,FileDirRef,Description0",
                type: "GET",
                headers: {              
                "accept": "application/json;odata=verbose",         
                },
                success:  this.success,
                error: this.failed 
            }
            );
     }           

    function success(data, args)
     {
        var pictureArray = new Array();
        var pictureCount = 0;
        var descCount = 0;
        var descriptionArray = new Array();
        var results = data.d.results;
        
        for(var i=0; i<results.length; i++) { 

            var filename = results[i].FileLeafRef  ;

            var fullFileURL=_spPageContextInfo.webAbsoluteUrl+"/imageSliderLib/"+filename;

            pictureArray[pictureCount++] = fullFileURL;
	descriptionArray[descCount++] = results[i].Description0;
			
        }
        var newHtml = '';
       
        for(i=0; i<pictureArray.length; i++) 
        
        {
            
            if(i==0)
            {
                $('#img1').attr('src',pictureArray[i]);
                $('#desc1').text(descriptionArray[i]);
            }
            else if(i==1)
            {
                $('#img2').attr('src',pictureArray[i]);
                $('#desc2').text(descriptionArray[i]);
            }
            else if(i==2)
            {
                $('#img3').attr('src',pictureArray[i]);
                $('#desc3').text(descriptionArray[i]);
            }
            else if(i==3)
            {
                $('#img4').attr('src',pictureArray[i]);
                $('#desc4').text(descriptionArray[i]);
            }
            else if(i==4)
            {
                $('#img5').attr('src',pictureArray[i]);
                $('#desc5').text(descriptionArray[i]);
            }            
        }             
    }

    function failed(sender, args) {
        alert('failed');
    }

    $(document).ready( function () { 
        LoadImages();   
     });

    </script>

Once you save the code, we can see the SharePoint Carousel will look like below:

SharePoint Online Carousel Example
SharePoint Online Carousel Example

You may also like following SharePoint customization examples:

Hope, this SharePoint tutorial helps to know how to implement an image slider or Carousel in SharePoint Online or SharePoint 2013/2016.

  • Hi, I am not sure what do I need to change in the code to make it work in my work sharepoint. Please let me know.

  • disregard my comment below please. is there any way we could add the previous and next icons. will appreciate.

    • I ran into this too. The trick is to make sure there are the same numbers of () lines as there are images in your carousel. This is the section just below each of your images.

  • The reason I asked as my requirement is that I have to show only 3 images even though library might have more images but they want to show latest 3…latest first though

  • Hello Bijay, I am getting a load error. When I manually look at “/_api/web/lists” I can search through the mass of text on the screen and am able to find my library which I named “ImageSliderLib” (Only difference from yours is a capital “I”).
    My section of that code is:

    function LoadImages(){
    $.ajax({
    url: _spPageContextInfo.webServerRelativeUrl +
    “/_api/web/lists/getByTitle(‘ImageSliderLib’)/Items?$select=Title,FileLeafRef,FileDirRef,Description0”,
    type: “GET”,
    headers: {
    “accept”: “application/json;odata=verbose”,
    },
    success: this.success,
    error: this.failed

    And I get the error message rather than it continuing onto the success section. 🙁
    I’ve checked my spelling and all seems correct. The banner displays blank and cycles through the numbers.

  • I have been able to make these slightly clickable by adding html link info within the class=text div area where your example has desc1 etc. But one thing all my users are asking me for is a way to cycle back and forth through them rather than waiting for the last one the say to come around again. Either that or a way to click the marker dots to jump to slide 5 of 5 or something. I have been unable to figure out a way on my own and was wondering if the author or anyone else can point me in the right direction?

  • >