Question

我为我的网站构建了一个图片库，当我在浏览器中查看它时，它可以工作，但是在移动设备上，它不起作用。这是PC版屏幕截图PC screenshot，这是移动屏幕截图Mobile screenshot。我尝试添加媒体查询，但是没有用。 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

我想您的问题很容易解决。某些浏览器仍然不支持最新的ECMA语法。尝试将所有const和let替换为var，并将所有箭头功能替换为常规箭头。

我修改了您的代码以使其可能在移动设备上运行。试试吧：

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)';

    }
});

为什么我的图片库无法在移动设备上运行？

1 个答案: