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
- 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.
I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
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.
So this will show only 5 recent images and if there are more images in the library it wont show all?
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?