изменить или адаптировать код JavaScript для галереи продуктов

Question

Привет! Во-первых, прощение за незнание, я не очень разбираюсь в javascript, но для проекта мне нужна помощь, мне нужно изменить код так, чтобы вместо using style = "дисплей: нет; "или style = "display: block;"используйте класс с именем image-active и сделайте первые изображения каждого изображения открытыми (во втором элементе вы видите, что первое полное изображение не отображается) .

Iнадеюсь, вы мне хорошо объяснили, если вам нужна дополнительная информация или более подробная информация, упомяните об этом.

Спасибо

var slideIndex = 1;
showSlides(slideIndex);

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  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";
}


//-----------------IGNORE THIS----//
var modal = "";

function openModal(target) {
  modal = document.getElementById(target);
  modal.style.display = "block";
}
function closeModal(target) {
  modal = document.getElementById(target);
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.item {
    overflow: hidden;
    margin: 12px 0;
    background-color: #333333;
}


/*----------IGNORE---------*/
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.418);
}

.modal-content {
    background-color: #333333;
    margin: 10% auto;
    padding: 22px;
    border: 1px solid transparent;
    width: 80%;
}

<div class="item">
  
  <div class="item-container">
    <h2>lorem ipsum1</h2>
    <p>Lorem desc</p>
    <button class="myBtn open-modal1" onclick="openModal('myModal1')">open modal</button>
  </div>
  <div id="myModal1" class="modal">
    <div class="modal-content">
            <span class="close" onclick="closeModal('myModal1')">X</span>
      <h2>lorem ipsum1</h2>

      <div class="gallery">
        <!--Full images-->
        <div class="mySlides">
          <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg">
        </div>
        <div class="mySlides">
          <img src="https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg" widht="400px" height="267px">
        </div>
        <div class="mySlides">
          <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg">
        </div>

        <!--thumnails-->
        <div class="row">
          <div class="column">
            <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg" widht="80px" height="80px" onclick="currentSlide(1)" class="demo cursor">
          </div>
          <div class="column">
            <img src="https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg" widht="80px" height="80px" onclick="currentSlide(2)" class="demo cursor">
          </div>
          <div class="column">
            <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg" widht="80px" height="80px" onclick="currentSlide(3)" class="demo cursor">
          </div>

        </div>

      </div>

    </div>
  </div>
  
</div>



<div class="item">
  
  <div class="item-container">
    <h2>lorem ipsum1</h2>
    <p>Lorem desc</p>
    <button class="myBtn open-modal2" onclick="openModal('myModal2')">open modal</button>
  </div>
  <div id="myModal2" class="modal">
    <div class="modal-content">
            <span class="close" onclick="closeModal('myModal2')">X</span>
      <h2>lorem ipsum1</h2>

      <div class="gallery">
        <!--Full images-->
        <div class="mySlides">
          <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg">
        </div>
        <div class="mySlides">
          <img src="https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg" widht="400px" height="267px">
        </div>
        <div class="mySlides">
          <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg">
        </div>

        <!--thumnails-->
        <div class="row">
          <div class="column">
            <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg" widht="80px" height="80px" onclick="currentSlide(4)" class="demo cursor">
          </div>
          <div class="column">
            <img src="https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg" widht="80px" height="80px" onclick="currentSlide(5)" class="demo cursor">
          </div>
          <div class="column">
            <img src="https://www3.gobiernodecanarias.org/medusa/wiki/images/a/a9/Example.jpg" widht="80px" height="80px" onclick="currentSlide(6)" class="demo cursor">
          </div>

        </div>

      </div>

    </div>
  </div>
  
</div>