JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="modal7" class="modal_div7">
     <div class="modalleft">
        
         <div class="previous" id="leftArrow">
             <div style="margin-top:60%;margin-left:8%;">‹</div>
         </div>
         <div id="gallery">
             <img id="image" src="image/jpg/1.jpg"  alt="картинка"><br>
         </div>
         <div class="next" id="rightArrow">
             <div style="margin-top:40%;margin-left:92%;">›</div>
         </div>
     </div>
     <div class="modalright">
         <span  class="modal_close">вњ•</span><br><br>
     </div>
</div>

JavaScript

;(function gallery(){
          var initImgNumber = 1,
          maxImgNumber = 30;
          
          var container = document.querySelector('.modal_close');
         
          var text = ['арбуз','дыня','персик'];
          container.textContent = text[initImgNumber];
          
          
          leftArrow.addEventListener('click', moveBackward);
          rightArrow.addEventListener('click',moveForward);
          
        function moveBackward(){
             initImgNumber --;
             if(initImgNumber == 0){initImgNumber = maxImgNumber};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };  
        
        function moveForward(){
             initImgNumber ++;
             if(initImgNumber > maxImgNumber){initImgNumber = 1};
             image.setAttribute('src', 'image/jpg/' + initImgNumber + '.jpg');
             container.textContent = text[initImgNumber];
        };
        
})();