Why can’t I click the hyperlinks in my card slider? – Blancer.com Tutorials and projects

I’m trying to make a JavaScript slider which needs to work on both mobile and desktop. It should be possible to click on each and every card which should redirect me to another page.

At this moment I’ve got a working slider but I cannot click on any of the cards. This is caused by pointer-events: none; but the slider won’t work without this line.

Does anyone know how to do this right or how I can approach this in other ways?

Thanks in advance,

let slider = document.querySelector(".slider");
let innerSlider = document.querySelector(".slider-inner");

let pressed = false;
let startx;
let x;

//pc controls
slider.addEventListener("mousedown", (e) => {
  pressed = true;
  startx = e.offsetX - innerSlider.offsetLeft;
  slider.style.cursor = "grabbing";
});

slider.addEventListener("mouseevent", () => {
  slider.style.cursor = "grab";
});

slider.addEventListener("mouseup", () => {
  slider.style.cursor = "grab";
});

slider.addEventListener("mouseup", () => {
  pressed = false;
});

slider.addEventListener("mousemove", (e) => {
  if (!pressed) return;

  x = e.offsetX;
  let temp = x - startx;
  innerSlider.style.left = temp + "px";

  checkboundary();
});

function checkboundary() {
  let outer = slider.getBoundingClientRect();
  let inner = innerSlider.getBoundingClientRect();

  if (parseInt(innerSlider.style.left) > 0) {
    innerSlider.style.left = "0px";
  } else if (inner.right < outer.right) {
    let temp = inner.width - outer.width;
    innerSlider.style.left = -temp + "px";
  }
}

.componentContainer {
  display: block;
  height: 220px;
  position: relative;
  width: 1200px;
  margin: auto;
}

.slider {
  position: absolute;
  width: inherit;
  height: 150px;
  overflow: hidden;
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slider-inner {
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  gap: 15px;
  pointer-events: none;
  transition: 0s ease-in;
  padding: 0 5px;

}

.slider-card {
  height: 140px;
  text-align: center;
  width: 240px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px #dbdbdb;
  position: relative;
}

.slider-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: inherit;
  position: absolute;
  width: 100%;
}

<div class="componentContainer">
    <h2>Onze promo's</h2>
    <div class="slider">
        <div class="slider-inner">
            <div class="slider-card" onclick="window.location.href='/test'">
                <a href="/test">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
            <div class="slider-card">
                <a href="">
                    <span>test</span>
                    <span>lorem</span>
                </a>
            </div>
        </div>
    </div>
</div>