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:

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:

You may also like following SharePoint customization examples:

• Save list as template missing in SharePoint Online modern team site
• Enable or Disable Notebook Link in SharePoint Online classic and modern sites
• Create a managed metadata navigation from Term Store in SharePoint Online
• SharePoint Online Gantt Chart View for Task List
• Cascading dropdown in SharePoint 2013/2016/Online using jQuery
• SharePoint Column Validation Examples
• Get Thumbnail Image URL from SharePoint Picture Library
• Image hover effects CSS using script editor web part in SharePoint online
• SharePoint Image Editor Product Review
• Image Viewer web part in SharePoint 2016
• SharePoint online branding : Images styling by CSS and HTML for SharePoint Online or SharePoint 2016/2013 sites
• How to Make image Map and use in SharePoint Online/2016/2013

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