JSFiddle - React, Tailwind, and code Playground

by Ajay Gandhi

HTML

<h2 id="title" style="text-align:center">hellkkko</h2>

 <div class="row">
  <div class="column">
    <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
  </div>
</div>

<div class="row">
  <div class="column">
    <img id="modal-2" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="2" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
  </div>
</div>

<div class="row">
  <div class="column">
    <img id="modal-3" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="3" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="clearSlides(); closeModal();">&times;</span>
  <div class="modal-content" id="modal_content">
       <a class="elbutton prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="elbutton next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

JavaScript

function openModal() {
    document.getElementById('myModal').style.display = "block";
  }

  function closeModal() {
    document.getElementById('myModal').style.display = "none";
  }

  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
  alert(n);
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
  function fillSlides(modalID){
    var container = document.getElementsByClassName("modal-content");
    var bcontainer = document.getElementById("myModal");
    var dcontainer = document.createElement('dot_content');

    var slides = {
      "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
      "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
      "3": ["Images/img1.jpg", "Images/img2.jpg", "Images/img3.jpg", "Images/2.jpg" ]
    };
    var modal_num = modalID.getAttribute('data-modal');
    //alert(slides[modal_num].length);

    for (var i = 0 ; i < slides[modal_num].length; i++) {
      var the_divs = document.createElement('div');
      var s_img = document.createElement('img'); 
      var s_dot = document.createElement('span');



      the_divs.className = 'mySlides';

      s_img.src = slides[modal_num][i];

      the_divs.appendChild(s_img);

      container[0].appendChild(the_divs); 
      dcontainer.className = 'dot-content';
      dcontainer.id = 'dot_content';
      s_dot.className = 'demo';

      dcontainer.appendChild(s_dot);
      container[0].appendChild(dcontainer);
      s_dot.onclick = currentSlide(i);
    }

 }
/*
  function clearSlides(){

    var myNode = document.getElementById("modal_content");
    while (myNode.firstChild) {
      myNode.removeChild(myNode.firstChild); 
    }
  }*/
  function clearSlides() {
    var myNode = document.getElementById("modal_content");
  //use spread operator to convert nodelist to array for using
  // array methods
  var c = [...myNode.children];
 ...