I am in the process of revamping a confluence page that showcases a variety of visualizations. Here is the code snippet I am currently working with:
<div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
CSS (embedded within a style tag):
.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel img {
width: 100%;
scroll-snap-align: start;
}
Javascript (included within a script tag):
const carousel = document.querySelector(".carousel");
let isDown = false;
let startX;
let scrollLeft;
carousel.addEventListener("mousedown", (e) => {
isDown = true;
startX = e.pageX - carousel.offsetLeft;
scrollLeft = carousel.scrollLeft;
});
carousel.addEventListener("mouseleave", () => {
isDown = false;
});
carousel.addEventListener("mouseup", () => {
isDown = false;
});
carousel.addEventListener("mousemove", (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - carousel.offsetLeft;
const walk = x - startX;
carousel.scrollLeft = scrollLeft - walk;
});
I have experimented with using anchor tags with href attributes around each image, but it seems to not work properly within the macro or maybe the carousel div itself. I am open to the possibility that the issue lies within the CSS or javascript implementation.