Clashing Script when try to get two sliders to work in a page

Question

I've been struggling with this syntax for a while since I'm not really advanced in JavaScript.

I have two sliders defined, Slider 1 is set to slide automatically after 2 seconds and slider 2 is supposed to slide when the previous and forward tabs are pressed. They worked fine independently, but when I put the two script on the same page the prev, next button keep increasing the speed of slider 1 while slider 2 does nothing which is kind of frustrating to me. I don't really know how to fix this. Here is the code.

<p class='sub'>Slide 1</p>

<div class="slideshow-container">

  <div class="mySlides fade">
    <img src="/ico/btc.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="/ico/xrp.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="/ico/tet.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="/ico/eth.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="/ico/ltc.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="/ico/dash.png" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="/ico/doge.png" style="width:100%">
  </div>

</div>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>

  <!-- Slide Html-->

  <p class='sub'>Slide 2</p>

  <div class="slideshow-cont">
    <div class="mySlides1">
      <h4>

        <p style='float:left;'>
          <img src="/Avatar.jpg" style="width:40px;height:40px;border-radius:50px;" />
        </p>

        " Text"
      </h4>
      <hr>
      <p align='right'>
        <font color='red'><b>Name1</b></font><br> <sub style='margin:4;'>(Accountant)</sub>
      </p>

    </div>
    <div class="mySlides1">

      <h4>

        <p style='float:left;'>
          <img src="/avatar3.jpg" style="width:40px;height:40px;border-radius:50px;" />
        </p>
        Text 1
      </h4>
      <hr>
      <p align='right'>
        <font color='red'><b>Name</b></font><br> <sub style='margin:4;'>(Trader)</sub>
      </p>

    </div>





    <div class="mySlides1">

      <h4>

        <p style='float:left;'>
          <img src="avatar2jpg" style="width:40px;height:40px;border-radius:50px;" />
        </p>

        " Text 2"
      </h4>
      <hr>
      <p align='right'>
        <font color='red'><b>Name</b></font><br> <sub style='margin:4;'>(Real Estate)</sub>
      </p>


    </div>




    <div class="mySlides1">

      <h4>

        <p style='float:left;'>
          <img src="/avatar.jpg" style="width:40px;height:40px;border-radius:50px;" />
        </p>

        " Text 3"
      </h4>
      <hr>
      <p align='right'>
        <font color='red'><b>Name 1</b></font><br> <sub style='margin:4;'>(Photographer)</sub>
      </p>
    </div>

    <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
    <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
  </div>


  <!-- Slide HTML -->






  <!-- Slider 2 Script-->

  <script>
    var slideIndex = [1, 1];
    var slideId = ["mySlides1"]
    showSlides(1, 0);
    showSlides(1, 1);

    function plusSlides(n, no) {
      showSlides(slideIndex[no] += n, no);
    }

    function showSlides(n, no) {
      var i;
      var x = document.getElementsByClassName(slideId[no]);
      if (n > x.length) {
        slideIndex[no] = 1
      }
      if (n < 1) {
        slideIndex[no] = x.length
      }
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex[no] - 1].style.display = "block";
    }
  </script>





  ////



  <!-- Slider 1  Script-->


  <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) {
        slideIndex = 1
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active";
      setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
  </script>

You could care less about the HTML I think the issue is with the script.

Answer 1

You can't have multiple functions with the same name, also I would create separate index variables.

So for example have:

slideIndex1 and slideIndex2

and

showSlides1( and showSlides2(