SharePoint Online Image Slider or Carousel Example

In this SharePoint online tutorial, we will see how to create an Image slider using JSOM in SharePoint Online (sharepoint online image carousel). Here we are using JavaScript, HTML, and CSS to create the image slider. Image sliders are very important components of a website and these provide a beautiful, classy, and attractive look to design websites and portals.

Image slider or image carousel is a changing image, usually positioned at the top of a website’s homepage. This creates maximum visual impact with the minimum space, that means why would you pick five images into the space of one.

I have also written an article on SharePoint Carousel Example where we are reading the images from a SharePoint document library.

Recently we got a requirement to create a Portal where there will be an image slider or a banner on the top reflecting company some images related to the company, its environment, and achievements.

SharePoint Online image slider

First, we need to store images in a SharePoint online (Download PDF for FREE) picture library for the image slider. Create a Picture library in SharePoint Online and store all the images. Then copy the image URLs which we will be putting in the script for image path. It is recommended to create a Picture library to store images.

Then create a web part page and add a script editor web part to the web part page.

Then we need to put the below code inside the script editor web part (click on EDIT SNIPPET).

SharePoint Image Slider Code

Below is full code to create an image slider in SharePoint, you can just replace the URL’s and can enter the text as a caption for the images as per your requirement.

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* 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: 50%;
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 / 3</div>
<img src="https://onlysharepoint2013.sharepoint.com/sites/Raju/ImageSliderslib/Cool.jpg" style="width:70%" height="200">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://onlysharepoint2013.sharepoint.com/sites/Raju/ImageSliderslib/home-office-336373__340.jpg" style="width:70%" height="200">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://onlysharepoint2013.sharepoint.com/sites/Raju/ImageSliderslib/myoffice.jpg" style="width:70%" height="200">
<div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:left">
<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 2 seconds
}
</script>

Once code pasted, Stop editing the page and refresh the web part page, you can see the Slider will appear.

You may like the following SharePoint tutorials:

• Create and use image mapping in SharePoint Online
• How to Customize SharePoint Modern list form using JSON
• SharePoint Online mega menu and Site Customizations
• How to Create a Tiles View using SharePoint Online modern list view customization
• SharePoint modern list view customization example
• How to customize a SharePoint List form
• The current page has been customized from its template. Revert to template SharePoint
• SharePoint News Web Part

In the above SharePoint Online article, we discussed how to create a simple image slider in SharePoint by passing the image URL and running the script. We can use the same code to create image slider SharePoint 2016, SharePoint 2013, or SharePoint 2010.