JavaScript幻灯片在第一次加载页面时不起作用，刷新后才起作用。

Question

你好啊

我的javascript滑块在移除页面中出现了问题。

你可以检查出它在 www.poznanprzeprowadzki.pl (不是一个商业:P), "Galeria "部分.在第一次加载, 幻灯片工作, 但是, 一个图片的34和第二个图片的14是在幻灯片-容器内.

在第一次加载，幻灯片的工作，但是，一个图像的34和14的第二个图像是在幻灯片的容器内。可以在画廊中滑动，但是点击按钮并不能移动图片。刷新后，在slideshow-container中只有一张图片，而且可以在图库中滑动。

我在页脚部分后加入了脚本。希望有人能帮助我...:)

    <script>
    const slideshowSlide = document.querySelector('.slideshow-slide');
    const slideshowImages = document.querySelectorAll('.slideshow-slide img');

    //Buttons

    const prevBtn = document.querySelector('#prevBtn');
    const nextBtn = document.querySelector('#nextBtn');

    //Counter
    let counter = 1;
    const size = slideshowImages[0].clientWidth;

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

    //Button Listeners

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

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

    slideshowSlide.addEventListener('transitionend', ()=>{
        if (slideshowImages[counter].id === 'lastclone') {
            slideshowSlide.style.transition = "none";
            counter = slideshowImages.length - 2;
            slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }
        if (slideshowImages[counter].id === 'firstclone') {
            slideshowSlide.style.transition = "none";
            counter = slideshowImages.length - counter;
            slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }
    });
</script>

画廊

<main>
    <div class="gallery-container">
        <div class="slideshow-container">
            <div class="slideshow-container-orange-bar">
                <p style="color: white; font-family: Open Sans; font-size: 16px; margin: 0; padding: 4px 20px 4px 8px;">Nasze auta</p>
            </div>
            <button class="slideshowBtn" id="prevBtn"><img src="img/Prev_img_icon_white.png" alt=""></button>
            <div class="slideshow-slide">
                <img id="lastclone" src="img/Ford-transit-back2.jpg" alt="">
                <img src="img/Ford-transit-front22.jpg" alt="">
                <img src="img/Ford-transit-front12.jpg" alt="">
                <img src="img/Ford-transit-back2.jpg" alt="">
                <img id="firstclone" src="img/Ford-transit-front22.jpg" alt="">
            </div>
            <button class="slideshowBtn" id="nextBtn"><img src="img/Next_img_icon_white.png" alt=""></button>
        </div>  
    </div>

Answer 1

我不知道如何刷新一个帖子，所以我将只留下一个评论。

Answer 2

你需要在你的index.php文件中也添加。理想的情况下放在or部分 - 应该可以。

<script src="app.js"></script>

在你的app.js中，你能不能用这段代码代替它。$(document).ready(function() {});

$(document).ready(function() {

  const slideshowSlide = document.querySelector('.slideshow-slide');
  const slideshowImages = document.querySelectorAll('.slideshow-slide img');

  //Buttons

  const prevBtn = document.querySelector('#prevBtn');
  const nextBtn = document.querySelector('#nextBtn');

  //Counter
  let counter = 1;
  const size = slideshowImages[0].clientWidth;

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

  //Button Listeners

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

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

  slideshowSlide.addEventListener('transitionend', ()=>{
    if (slideshowImages[counter].id === 'lastclone') {
      slideshowSlide.style.transition = "none";
      counter = slideshowImages.length - 2;
      slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
    if (slideshowImages[counter].id === 'firstclone') {
      slideshowSlide.style.transition = "none";
      counter = slideshowImages.length - counter;
      slideshowSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }
  });
});