Swiping through a photo on the mobile version of the site?

Question

JavaScript

Tell me how in this script to make the paging of the photo by swiping? now you need to click on the edge of the photo to open another photo?

<script>
           var max_foto = 3; var rez = 5; 
           var tek_pos = 0; var perv_pos = 0; 
           var posl_pos; if(max_foto<rez) {posl_pos = max_foto-1; var slid=1;} else posl_pos = rez-1; 
           
           var ps = posl_pos;
        
           var Foto = new Array(); var Fotom = new Array();
            
              
   Foto[0] = 'https://test53.ru/foto/87/5887b.jpg'; Fotom[0] = 'https://test53.ru/foto/87/5887s.jpg';
   Foto[1] = 'https://test53.ru/foto/88/5888b.jpg'; Fotom[1] = 'https://test53.ru/foto/88/5888s.jpg';
   Foto[2] = 'https://test53.ru/foto/89/5889b.jpg'; Fotom[2] = 'https://test53.ru/foto/89/5889s.jpg';
   Foto[3] = 'https://test53.ru/foto/90/5890b.jpg'; Fotom[3] = 'https://test53.ru/foto/90/5890s.jpg';
   Foto[4] = 'https://test53.ru/foto/91/5891b.jpg'; Fotom[4] = 'https://test53.ru/foto/91/5891s.jpg';							
              
          function opti(opt){
                for (var n=0; n<rez; n++)
                  {
                  if(n==opt)
                  $("#tdq"+n).animate({opacity: 1}, 0 ); 
                  else
                  $("#tdq"+n).animate({opacity: 0.4}, 0 ); 
                  }
                }
              
          function vizi(a, b){
                for (i=0; i<rez; i++)
                  {
                  if(i>=a && i<=b)
                  document.getElementById('tdq'+i).style.display = '';
                  else
                  document.getElementById('tdq'+i).style.display = 'none';
                  }
                if(perv_pos==0)
                  {
                  document.getElementById('prebl').style.display = 'none';
                  document.getElementById('prebl_a').style.display = '';
                  document.getElementById('tobl').style.display = '';
                  document.getElementById('tobl_a').style.display = 'none';
                  }
                if(posl_pos==(rez-1))
                  {
                  document.getElementById('prebl').style.display = '';
                  document.getElementById('prebl_a').style.display = 'none';
                  document.getElementById('tobl').style.display = 'none';
                  document.getElementById('tobl_a').style.display = '';
                  }
                if(perv_pos !=0 && posl_pos !=(rez-1))
                  {
                  document.getElementById('prebl').style.display = '';
                  document.getElementById('prebl_a').style.display = 'none';
                  document.getElementById('tobl').style.display = '';
                  document.getElementById('tobl_a').style.display = 'none';
                  }
                }
              
           function toTek(j) {
                eval("imgObj" + j + "= new Image()"); 
                eval("imgObj" + j + ".src = '" + Foto[j] + "'");
                eval("document.vvr.src = imgObj"+j+".src");
                tek_pos=j;
                opti(tek_pos); 
                }
        
           function toTekd() {
                tek_pos++; if(tek_pos==rez) tek_pos=0; 
                eval("imgObj" + tek_pos + "= new Image()");
                eval("imgObj" + tek_pos + ".src = '" + Foto[tek_pos] + "'");
                eval("document.vvr.src = imgObj"+tek_pos+".src");
                
                if(tek_pos > posl_pos) 
                  {
                  perv_pos=tek_pos-ps; posl_pos=tek_pos;
                  }
                
                if(tek_pos==0)
                  {
                  perv_pos=0; posl_pos=ps;
                  }
                
                if(tek_pos < perv_pos)
                  {
                  perv_pos=tek_pos; posl_pos=tek_pos+ps;
                  }
                if(slid) vizi(perv_pos, posl_pos);
                opti(tek_pos);
                }
        
           function preBlok() {perv_pos--; posl_pos--; vizi(perv_pos, posl_pos);}
           function toBlok() {perv_pos++; posl_pos++; vizi(perv_pos, posl_pos);}
        
              </script>

Answer 1

There is a nice carousel that already has swipe implemented. idangero.us/swiper
_