SharePoint Online Image Slider or Carousel Example

sharepoint 2010 image slider
InfoPath alternatives for form designing SharePoint

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.

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.

Store Images for Image Slider in SharePoint Online Picture Library:

  • 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 carousel
SharePoint online image carousel
image slider using javascript
image slider using javascript

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

image slider using javascript html css

    image slider using javascript HTML CSS

Image Slider Code

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

<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 image slider
SharePoint online image slider

Conclusion

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.

Similar SharePoint 2013 Tutorials

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 →

Leave a Reply