Why does my image gallery not work on mobile?

Question

I built an image gallery for my website, and when I view it in the browser it works, but on the mobile it does not work. Here is a PC version screenshot PC screenshot , and here is the mobile screenshot Mobile screenshot . I tried adding a media queries, but it does not work. Site link

html:

 <div class="carousel-container">
        <i class="fas fa-arrow-right" id="nextBtn"></i>
        <i class="fas fa-arrow-left" id="prevBtn"></i>
        <div class="carousel-slide" >
          <img src="./Page3/sajla.jpg" id='lastClone' alt="" >
          <img src="./Page3/bucice.jpg" alt="">
          <img src="./Page3/lat.jpg" alt="">
          <img src="./Page3/row sprava.jpg" alt="">
          <img src="./Page3/sajla.jpg" alt="">
          <img src="./Page3/bucice.jpg" id="firstClone" alt="">
        </div>

css:

.carousel-container{
    width: 60%;
    margin: auto;
   border: 5rem solid #75BF4F;
   border-radius: 3rem;
  position: relative;
   overflow: hidden;
}
.carousel-slide{
    display: flex;
    height: 80rem;
    width: 100%;


}
.carousel-slide img{
    width: 100%;

}
#prevBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10rem;
    width: 10rem;
    border-radius: 20rem;
    position: absolute;
    top: 50%;
    z-index: 10;
    left: 5%;
    font-size: 6rem;
    color: black;
    cursor: pointer;
    background-color: #C4C4C4;
}
#nextBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10rem;
    width: 10rem;
    position: absolute;
    border-radius: 20rem;
    background-color: #C4C4C4;
    top: 50%;
    z-index: 10;
    right: 5%;
    font-size: 6rem;
    color: black;
    cursor: pointer;
}

javascipt:

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
const prevBtn  = document.querySelector('#prevBtn');
const nextBtn  = document.querySelector('#nextBtn');

let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

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

});
prevBtn.addEventListener('click', () =>{
    if(counter <= 0)return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

});

carouselSlide.addEventListener('transitionend',()=>{
console.log(carouselImages[0])
if(carouselImages[counter].id === 'lastClone'){
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - 2;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

}
});
carouselSlide.addEventListener('transitionend',()=>{
    console.log(carouselImages[0])
    if(carouselImages[counter].id === 'firstClone'){
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    }
    });

Answer 1

I guess your problem is quite easy to solve. Some browsers still doesn't support the newest ECMA syntax. Try replacing all const and let to var and all your arrow functions to regular ones.

I modified your code to make it possibly work on mobile. Try it:

var carouselSlide = document.querySelector('.carousel-slide');
var carouselImages = document.querySelectorAll('.carousel-slide img');
var prevBtn  = document.querySelector('#prevBtn');
var nextBtn  = document.querySelector('#nextBtn');

var counter = 1;
var size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

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

});
prevBtn.addEventListener('click', function() {
    if(counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

});

carouselSlide.addEventListener('transitionend',function() {
console.log(carouselImages[0])
if(carouselImages[counter].id === 'lastClone'){
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - 2;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

}
});
carouselSlide.addEventListener('transitionend', function() {
    console.log(carouselImages[0])
    if(carouselImages[counter].id === 'firstClone'){
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    }
});