How to make auto slideshow of Divs stop when target link to one of the slide is clicked

I have a slideshow of divs that automatically cycles through but how do i make it so that when i click on a target link, it leads me there and stops the cycling of the slideshow. Moreover, after a few cycles, the slides start to clog up and aggregate on top of one another, can someone please help tp rectify this error thanks.

This is my current code:

parent div {
    display: none;
    position: absolute;
}

#parent div:first-child {
    display: block;
}

#parent > div {
    width: 400px;
    height: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slideshow-container" id="parent">
    <script>
        function Divs() {
            var divs = $("#parent div"),
                now = divs.filter(":visible"),
                next = now.next().length ? now.next() : divs.first(),
                speed = 1000;
            now.fadeOut(speed);
            next.fadeIn(speed);
        }
        $(function () {
            setInterval(Divs, 1400);
        });
    </script>
    <div class="box" id="food">
        <h2>hi</h2>
    </div>
    <div class="box" id="infrastructure">
        <h2>bye</h2>
    </div>
    <div class="box" id="culture">
        <h2>hi</h2>
    </div>
    <div class="box" id="nature">
        <h2>bye</h2>
    </div>
</div>

Answer

If you set your interval to a variable you can point an event-listener to the parent div and on click you can reset the timer.

here is a solutuion:

const interval= setInterval(divs, 1400)

const parentContainer = document.querySelector('#parent')

parentContainer.addEventListener('click', event => {
  clearInterval(interval)
  console.log(event.target.parentNode)
})

divs(interval)

function divs() {
              var divs= $('#parent div'),
                  now = divs.filter(':visible'),
                  next = now.next().length ? now.next() : divs.first(),
                  speed = 1000;
              now.fadeOut(speed);
              next.fadeIn(speed);
          }

#parent div {
  display: none;
  position: absolute;
}
#parent div:first-child {
  display: block;
}

#parent > div {
  width: 400px;
  height: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
  <div class='box' id='food'>
    <h2>food</h2>
  </div>
  <div class='box' id='infrastructure'>
    <h2>infrastructure</h2>
  </div>
  <div class='box' id='culture'>
    <h2>culture</h2>
  </div>
  <div class='box' id='nature'>
    <h2>nature</h2>
  </div>
</div>