How To Correctly Point To A Slider#

I Have this menu on the left with 8 selections, All and 7 different squad names. On The Right, I have 8 slides. Each of the 8 selections on the left should change to a correlating slide on the right. This is how it looks like.

This is the code I have:

var slideIndex = 0;
showSlides(slideIndex);

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {

  var slides = document.getElementsByClassName("mySlides");
  slideIndex = n

  slides[slideIndex].style.display = "block";
}

<div style="display:flex;">
  <div style="flex:1;padding-right:5px;padding-left:40px;"><img src="https://lh3.googleusercontent.com/DsmSNoqWSSXzEve4aAy3vxlHdCWLqZjLIbC_rhNY7xSU9HHqsBmDCX1QiveQ1Y18B1dVqe4PTSkhLjfMa_sL=s1600" usemap="#image-map" class="fr-fil fr-dib">
    <map name="image-map">
			<area target="" alt="Finance" title="Finance" target="_blank" rel="nofollow noreferrer" href="#slide1" coords="245,5,348,123" shape="rect">
			<area target="" alt="Customer Care" title="Customer Care" target="_blank" rel="nofollow noreferrer" href="#slide2" coords="99,47,212,131" shape="rect">
			<area target="" alt="People and Culture" title="People and Culture" target="_blank" rel="nofollow noreferrer" href="#slide3" coords="13,170,123,298" shape="rect">
</map>
  </div>


  <div class="slideshow-container" style="flex:1;padding-left:5px;">
    <div class="mySlides fade" id="slide1" style="width: default;"><img src="https://lh3.googleusercontent.com/6OiY01hC8ZkojpDQy3GFq447c1d31VIEG2Ur36CrazhJgRUAbe6u0XX_DCqXp94CP1xfCS-rDhVtqAJhEg55=s1600" class="mySlides fr-fic fr-dii"></div>
    <div class="mySlides fade" id="slide2" style="width: default;"><img src="https://lh3.googleusercontent.com/agOhlVPvTSSFbpb2Gs2W1xQmqoEPLxbxrAtvtkcbQSACL-6hDsAzZsvZ3iEy3Iu9h-Te4belDEDzSP-ANQ=s1600" class="mySlides fr-fic fr-dii"></div>
    <div class="mySlides fade" id="slide3" style="width: default;"><img src="https://lh3.googleusercontent.com/x6JNN51TlsKNnJuOmOvGg41rx3JJkovcAZN2T2CKjAQU8nJe1hQPe_SXk8HyqPAI3w4_I-25pkdZNRJ3cak=s1600" class="mySlides fr-fic fr-dii"></div>

  </div>

What am I doing wrong here? I've tried using onclick and some javascript but did that wrong also.

So I ended up meddling with the JavaScript for a bit. The only real thing changed in the html was adding event handlers for the JS and to remove second references to the mySlides class in the <\img> tags.

Anyways, heres the code

<div style="display:flex;">
    <div style="flex:1;padding-right:5px;padding-left:40px;"><img src="https://lh3.googleusercontent.com/DsmSNoqWSSXzEve4aAy3vxlHdCWLqZjLIbC_rhNY7xSU9HHqsBmDCX1QiveQ1Y18B1dVqe4PTSkhLjfMa_sL=s1600" usemap="#image-map" class="fr-fil fr-dib">
        <map name="image-map">
            <area target="" alt="Finance" title="Finance" target="_blank" rel="nofollow noreferrer" href="#slide1" coords="245,5,348,123" shape="rect" onclick="showSlides(1);">
            <area target="" alt="Customer Care" title="Customer Care" target="_blank" rel="nofollow noreferrer" href="#slide2" coords="99,47,212,131" shape="rect" onclick="showSlides(2);">
            <area target="" alt="People and Culture" title="People and Culture" target="_blank" rel="nofollow noreferrer" href="#slide3" coords="13,170,123,298" shape="rect" onclick="showSlides(3);">
        </map>
</div>


<div class="slideshow-container" style="flex:1;padding-left:5px;">
        <div class="mySlides fade" id="slide1" style="width: default; display: none"><img src="https://lh3.googleusercontent.com/6OiY01hC8ZkojpDQy3GFq447c1d31VIEG2Ur36CrazhJgRUAbe6u0XX_DCqXp94CP1xfCS-rDhVtqAJhEg55=s1600" class="fr-fic fr-dii"></div>
        <div class="mySlides fade" id="slide2" style="width: default; display: none"><img src="https://lh3.googleusercontent.com/agOhlVPvTSSFbpb2Gs2W1xQmqoEPLxbxrAtvtkcbQSACL-6hDsAzZsvZ3iEy3Iu9h-Te4belDEDzSP-ANQ=s1600" class="fr-fic fr-dii"></div>
        <div class="mySlides fade" id="slide3" style="width: default; display: none"><img src="https://lh3.googleusercontent.com/x6JNN51TlsKNnJuOmOvGg41rx3JJkovcAZN2T2CKjAQU8nJe1hQPe_SXk8HyqPAI3w4_I-25pkdZNRJ3cak=s1600" class="fr-fic fr-dii"></div>
</div>

<script>
    var slideIndex = -1;

    function currentSlide(n)
    {
        showSlides(slideIndex = n);
    }

    function showSlides(n)
    {
        var slides = document.getElementsByClassName("mySlides");
        var x;

        if (slideIndex == n - 1){
            slideIndex = -1;
        }else{
            slideIndex = n - 1
        }

        for (x = 0; x < slides.length; x++){
            if (slideIndex == x){
                slides[slideIndex].style.display = "block";
            }else{
                slides[x].style.display = "none";
            }
        }

    }

</script>