How do I get images to link to urls within my carousel?

Question

I'm redesigning a confluence page that displays various visualizations. I am using the following code:

<div class="carousel">
     <img src="image1.jpg">
     <img src="image2.jpg">
     <img src="image3.jpg">
</div>

CSS (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 (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 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.

Not sure why wrapping the image in anchors wouldn't work? Can you provide an minimal reproducible example? — Paulie_D
– Paulie_D, Commented Jul 17, 2024 at 14:39
What "doesn't seem to work" about it? Can you update the question with a minimal reproducible example as a runnable code snippet which demonstrates the problem? — David
– David, Commented Jul 17, 2024 at 14:42

James Laycock · Accepted Answer · 2024-07-17 15:26:07Z

you will need to adjust the css to match the change in structure when you wrap the images in anchors.

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;
});

.carousel {
     display: flex;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
}
.carousel a {
      width: 100%;
      scroll-snap-align: start;
}

<div class="carousel">
     <a><img src="image1.jpg"></a>
     <a><img src="image2.jpg"></a>
     <a><img src="image3.jpg"></a>
</div>

Collectives™ on Stack Overflow

How do I get images to link to urls within my carousel?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related