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.
Bhawana Rathore is a Microsoft MVP (3 times in Office Apps & Services) and a passionate SharePoint Consultant, having around 10 years of IT experience in the industry, as well as in .Net technologies. She likes to share her technical expertise in EnjoySharePoint.com and SPGuides.com
rather than hard code the image names, how to randomly pick most recent 10 images?
Hey David, I will post it very soon… Thanks for your comment.
Hi I wrote an article, you can have a look at it. https://www.sharepointsky.com/sharepoint-carousel-example/
Thanks, works nicely
Thank you. How do I make these images clickable?
I was not able to make the images themselves clickable, but I put all my html link info in the caption area and it worked great. Only caption text was clickable, but my users were happy with that.
How we can get all picture library images and display in the custom carousel web part in SP2010
How do i make 3 dots clickable, In cases if i click 3rd dot 3r screen should display
The slideshow only shows 4 images, I’ve tried adding more using the same format but it won’t work. How do I make that work and also how do I autorotate the slides to go back to the first one after it has finished?
Same question here. Any number of slider images above 3 will show the 4th one but locks up at 4. I’ve tried everything I felt I could understand in the script code, but not success.
Couldn’t figure it out for the longest time and nobody was answering this. Finally spotted the problem and found the fix. It’s the part. Must have equal number of these lines to the number of pictures. I added 2 more for a total of 5 and was able to do 5 images without locking.
Oops it stripped out 5the important part because I copied and pasted with the brackets. It’s the span class “dot” part. Need equal number of span lines to pictures.
How do I change the length that each image is displayed?
One of the very last lines of the script says ‘Change image every XX seconds’. I input 20 seconds, but it is still changing quite quickly (maybe 2-3 seconds).
There is no preview for how this looks. Wouldn’t you want to see it before deciding to use the code?