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.

  • >