Internet Explorer is not executing my script

Question

I've made a script that move the images as you, click the next and back button in my website, it works fine in Chrome, Firefox, Edge, Opera and Safari, but doesn't work in IE11.

I've already tried putting

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

at the head and also this script before closing :

if (typeof(UserAgentInfo) != 'undefined' && !window.addEventListener) 
{ 
    UserAgentInfo.strBrowser=1; 
} 

none of it works, here is part of my script:

	var slideS = document.querySelector('.slide');
	var slideImg = document.querySelectorAll('.slide img');
	var slideC = document.querySelector('.slideC');
	
	//buttons
	var prevBtn = document.querySelector('#prevBtn');
	var nextBtn = document.querySelector('#nextBtn');
	
	var counter = 1;
	var size = slideC.offsetWidth;
	
	slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';
    var counter = 1;
	var size = slideC.offsetWidth;
	
	slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';
	
	nextBtn.addEventListener('click', ()=>{
	if (counter >= slideImg.length - 1) return;
	slideS.style.transition = "transform 0.4s ease-in-out";
	counter = counter + 1;
	slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';
	});
	
	prevBtn.addEventListener('click', ()=>{
	if (counter <= 0) return;
	slideS.style.transition = "transform 0.4s ease-in-out";
	counter = counter - 1;
	slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';
	});
	

	slideS.addEventListener('transitionend', ()=>{
		if(slideImg[counter].id === 'uClone'){
			slideS.style.transition = "none";
			counter = slideImg.length - 2;
			slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';	
		}
		if(slideImg[counter].id === 'pClone'){
			slideS.style.transition = "none";
			counter = slideImg.length - counter;
			slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';			
		}
	});

    .slide {
    display: flex;
    width: 100%;				
    }
    .slideC {
    width: 768px;
    height: 432px;
    margin: 30px auto 0 auto;
    overflow: hidden;
    position: relative;
    }
    		
    .menuBtn:hover{
    	color: #6936a3;
    }
    
    #prevBtn{
    	position: absolute;
    	background: #bbbbbb;
    	height: 432px;
    	left: 0%;
    	width: 200px;
    	z-index: 10;
    	font-size: 40px;
    	color: #fff;
    	opacity: 0;
    	cursor: pointer;
    	text-align: center;
    }
    #prevBtn:hover{
    	opacity: 0.2;
    	
    }
    
    #nextBtn{
    	position: absolute;
    	background: #bbbbbb;
    	height: 432px;
    	right: 0%;
    	width: 200px;
    	z-index: 10;
    	font-size: 40px;
    	color: #fff;
    	opacity: 0;
    	cursor: pointer;
    	text-align: center;
    }
    #nextBtn:hover{
    	opacity: 0.2;
    }
    
    #lupa{
    	height: 432px;
    	width: 368px;
    	background: #bbbbbb;
    	position: absolute;
    	z-index: 10;
    	right: 200px;
    	font-size: 40px;
    	color: white;
    	opacity: 0;
    	cursor: pointer;
    }
    
    #lupa:hover{
    	opacity: 0.2;
    }
    
    #main{ width: 100%; height: 100%; position: absolute; }
    
    #appear_image_div{
    	width: 100%; height: 183%;
    	position: abosolute;
    	z-index: 15;
    	opacity:0.9;
    	background: black;
    }
    
    #appear_image{ 
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	z-index: 16;
    	border-radius: 18px;
    }
    
    #close{ 
    	position: fixed;
    	bottom: 92%;
    	left: 95%;
    	z-index: 16;
    	border-radius: 18px;
    	font-size: 40px;
    	color: #dedede;
    	opacity: 1;
    	cursor: pointer;
    }

				<div id="titulointro" style="display: block; margin: 0; padding: 0;">
					<h3 style="margin-top: 70px; margin-bottom: 0px; color: white; text-transform: uppercase; font-weight: 400; font-size: 30px; font-family: FuturaMediumBT; Arial; Helvetica; sans-serif;">
					Projetos de marketing</h3>
					<span style="display: inline-block; margin-top: 30px; width: 30px; border-bottom: 1px solid #bbb5b5; background: #fff;"></span>					
				</div>
					<div class="slideC" style="box-shadow: 0px 6px #48337a;border-radius: 15px;">
						<div id="prevBtn">
						<i class="fas fa-arrow-left" style="margin-top: 197px;"></i>
						</div>
						<div id="nextBtn">
						<i class="fas fa-arrow-right" style="margin-top: 197px;"></i>
						</div>
						<div id="lupa">
						<i class="fas fa-search-plus" style="margin-top: 197px;"></i>
						</div>
						<div id="fotos" class="slide">
						<img src="4.jpg" id="uClone" width="768" height="432" style="min-width: 768"></img>
						<img src="1.jpg" id="img1" width="768" height="432" style="min-width: 768"></img>
						<img src="2.jpg" id="img2" width="768" height="432" style="min-width: 768"></img>
						<img src="3.jpg" id="img3" width="768" height="432" style="min-width: 768"></img>
						<img src="4.jpg" id="img4" width="768" height="432" style="min-width: 768"></img>
						<img src="1.jpg" id="pClone" width="768" height="432" style="min-width: 768"></img>
					</div>
				</div>

Answer 1

ES6 syntax (let, const, arrow functions, etc.) do not work in IE. Try changing

let counter = 1;
const size = slideC.offsetWidth;

To:

var counter = 1;
var size = slideC.offsetWidth;

Also, in your addEventListeners you're using arrow functions. Those are also from ES6, so e.g. instead of

nextBtn.addEventListener('click', ()=>{
	if (counter >= slideImg.length - 1) return;
	slideS.style.transition = "transform 0.4s ease-in-out";
	counter = counter + 1;
	slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';
	});

Use

nextBtn.addEventListener('click', function() {
	if (counter >= slideImg.length - 1) return;
	slideS.style.transition = "transform 0.4s ease-in-out";
	counter = counter + 1;
	slideS.style.transform = 'translateX(' + (-size * counter) + 'px)';
	});