title: Why can't I click the hyperlinks in my card slider?
body: <p>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.</p>
  <p>At this moment I've got a working slider but I cannot click on any of the cards. This is caused by <code>pointer-events: none;</code> but the slider won't work without this line.</p>
  <p>Does anyone know how to do this right or how I can approach this in other ways?</p>
  <p>Thanks in advance,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let slider = document.querySelector(".slider");
  let innerSlider = document.querySelector(".slider-inner");
  
  let pressed = false;
  let startx;
  let x;
  
  //pc controls
  slider.addEventListener("mousedown", (e) =&gt; {
    pressed = true;
    startx = e.offsetX - innerSlider.offsetLeft;
    slider.style.cursor = "grabbing";
  });
  
  slider.addEventListener("mouseevent", () =&gt; {
    slider.style.cursor = "grab";
  });
  
  slider.addEventListener("mouseup", () =&gt; {
    slider.style.cursor = "grab";
  });
  
  slider.addEventListener("mouseup", () =&gt; {
    pressed = false;
  });
  
  slider.addEventListener("mousemove", (e) =&gt; {
    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) &gt; 0) {
      innerSlider.style.left = "0px";
    } else if (inner.right &lt; outer.right) {
      let temp = inner.width - outer.width;
      innerSlider.style.left = -temp + "px";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="componentContainer"&gt;
      &lt;h2&gt;Onze promo's&lt;/h2&gt;
      &lt;div class="slider"&gt;
          &lt;div class="slider-inner"&gt;
              &lt;div class="slider-card" onclick="window.location.href='/test'"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="slider-card"&gt;
                  &lt;a href="#"&gt;
                      &lt;span&gt;test&lt;/span&gt;
                      &lt;span&gt;lorem&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>