Skip to main content
All CollectionsCreate and Edit Tours
How to add an Image Slideshow as an Infospot
How to add an Image Slideshow as an Infospot

You can show a slideshow in an Infospot using the "HTML Infospot" type.

Clayton Rothschild avatar
Written by Clayton Rothschild
Updated over a week ago

There are many types of infospots users can create - including Image Infospots which show an image when clicked. Today, CloudPano does not natively allow users to create slideshows. However, you can create a slideshow manually using HTML and our HTML Infospot feature.
​
Here's an example of the slideshow that will be embedded into the Infospot popup: https://codepen.io/claytonrothschild1/pen/MWqmKew
​
If you want to use this slideshow, you should:

  1. Host your images somewhere else, like Imgur or Google Drive. Make sure the Sharing Settings are set to "Public."

  2. Then, place an Infospot on your scene.

  3. Select the HTML Infospot type.

  4. Paste this code into the HTML area of the Infospot:
    ​

 <h1>Image Slider</h1>
<div class="slide-container">
<div class="slide fade">
<!-- SET YOUR IMAGES BELOW -->
<img src='https://images.unsplash.com/photo-1590595978583-3967cf17d2ea?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="slide fade">
<img src='https://images.unsplash.com/photo-1588807308097-fb6e5047df8c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="slide fade">
<img src='https://images.unsplash.com/photo-1589808710416-24cf7ac026f2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="slide fade">
<img src='https://images.unsplash.com/photo-1588796388882-a4d533c47e5e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<!-- REPEAT THE ABOVE AS MANY TIMES AS YOU NEED. STOP ADDING IMAGES AFTER THIS LINE -->

<a href="#" class="prev" title="Previous">&#10094</a>
<a href="#" class="next" title="Next">&#10095</a>
</div>
<div class="dots-container">
<!-- ADD A DOT FOR EACH IMAGE. IF YOU HAVE FOUR IMAGES, HAVE FOUR DOTS BELOW -->
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<!-- REPEAT THE ABOVE AS MANY AS YOU NEED. DO NOT ADD DOTS BELOW THIS LINE -->
</div>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll(".slide")
const dots = document.querySelectorAll('.dot')

const init = (n) => {
slides.forEach((slide, index) => {
slide.style.display = "none"
dots.forEach((dot, index) => {
dot.classList.remove("active")
})
})
slides[n].style.display = "block"
dots[n].classList.add("active")
}
document.addEventListener("DOMContentLoaded", init(currentSlide))
const next = () => {
currentSlide >= slides.length - 1 ? currentSlide = 0 : currentSlide++
init(currentSlide)
}

const prev = () => {
currentSlide <= 0 ? currentSlide = slides.length - 1 : currentSlide--
init(currentSlide)
}

document.querySelector(".next").addEventListener('click', next)

document.querySelector(".prev").addEventListener('click', prev)


dots.forEach((dot, i) => {
dot.addEventListener("click", () => {
console.log(currentSlide)
init(i)
currentSlide = i
})
})

</script>
<style>.slide-container .prev,
.slide-container .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
transition: all 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

.slide-container .prev:hover,
.slide-container .next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}

.slide-container .prev {
left: 2px;
}

.slide-container .next {
right: 2px;
}

.dots-container {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}

.dots-container .dot {
cursor: pointer;
margin: 5px;
width: 20px;
height: 20px;
color: #333;
border-radius: 50%;
background-color: #dfd6ce;
}

.dots-container .dot.active {
border: 2px solid green;
}

* {
padding: 0;
border: 0;
box-sizing: border-box;
}

body {
height: 100%;
/* background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); */
}

body h1 {
text-align: center;
}

.slide-container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: auto;
position: relative;
}

.slide-container .slide {
display: none;
width: 100%;
}

.slide-container .slide.fade {
animation: fade 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.slide-container .slide img {
width: 100%;
}
</style>

If you are having trouble with the above, don't panic!

The code is simple to someone familiar with basic HTML and Javascript.

This feature is not natively supported by CloudPano and our support staff are not engineers. If you are having trouble with it, we are happy to try to help. But we often find user's get their best help with HTML and Javascript questions in our power user group on Facebook: Virtual Tour Profit.

Did this answer your question?