I’m redesigning a confluence page that displays various visualizations. I am using the following code:
<code><div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</code>
<code><div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</code>
<div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
CSS (within a style tag):
<code>.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel img {
width: 100%;
scroll-snap-align: start;
}
</code>
<code>.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel img {
width: 100%;
scroll-snap-align: start;
}
</code>
.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel img {
width: 100%;
scroll-snap-align: start;
}
javascript (within a script tag):
<code>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;
});
</code>
<code>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;
});
</code>
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 tried using the anchor tag with the href surrounding each image, but it doesn’t seem to work within the macro or perhaps the carousel div itself, but I’m totally willing to concede that the CSS or javascript may be the issue here.
3
you will need to adjust the css to match the change in structure when you wrap the images in anchors.
<code>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;
});</code>
<code>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;
});</code>
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;
});
<code>.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel a {
width: 100%;
scroll-snap-align: start;
}</code>
<code>.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel a {
width: 100%;
scroll-snap-align: start;
}</code>
.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel a {
width: 100%;
scroll-snap-align: start;
}
<code><div class="carousel">
<a><img src="image1.jpg"></a>
<a><img src="image2.jpg"></a>
<a><img src="image3.jpg"></a>
</div></code>
<code><div class="carousel">
<a><img src="image1.jpg"></a>
<a><img src="image2.jpg"></a>
<a><img src="image3.jpg"></a>
</div></code>
<div class="carousel">
<a><img src="image1.jpg"></a>
<a><img src="image2.jpg"></a>
<a><img src="image3.jpg"></a>
</div>