SharePoint Online Image Slider or Carousel Example

sharepoint 2010 image slider
SharePoint deveopment training course

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.

SharePoint Online Image Slider or Carousel Example
SharePoint Online Image Slider or Carousel Example

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

SharePoint Online Image Slider
SharePoint Online Image Slider

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

SharePoint Online Image Slider example
SharePoint Online Image Slider example

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 like below:

SharePoint Online Carousel Example
SharePoint Online Carousel Example

You may like following SharePoint tutorials:

In the above SharePoint Online article, we discussed how to create a simple image slider 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.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →