我的图像 Slider 的脚本不起作用

Question

I'm writing a script for my image slider as it's part of my project and understanding javascript, however, when I use icons from fontawesome the 'previous' and 'next' buttons do not work.我正在为我的图像 slider 编写脚本，因为它是我项目的一部分，并且理解 javascript，但是，当我使用来自 fontawesome 的图标时，“上一个”和“下一个”按钮不起作用。 I doubt it's the CSS because there are no visual problems just something script related.我怀疑它是 CSS 因为没有视觉问题只是与脚本相关的问题。

The script:剧本：

const repeatSlide = document.querySelector('.container-slide');
const repeatImages = document.querySelectorAll('.container-slide img');

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

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

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


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

});

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

});

//

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

  if (repeatImages[counter].id === 'lastClone') {
    repeatSlide.style.transition = "none";
    counter = repeatImages.length - counter;
    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }
});

HTML: HTML：

<div class="one-container">
  <i class="fas fa-arrow-left" id="prevBtn"></i>
  <i class="fas fa-arrow-right" id="nextBtn"></i>
  <div class="container-slide">
    <img src="cisheader.jpg" id="lastClone" alt="">
    <img src="original-image.jpg" alt="">
    <img src="My-Setup-Full-78735e8a827756f2d0de095b5ceb587a-700x441.png" alt="">
    <img src="information-computer-tech.jpg" alt="">
    <img src="cisheader.jpg" alt="">
    <img src="original-image.jpg" id="firstClone" alt="">
  </div>
</div>

This is how the image slider looks like: Image这就是图像slider 的样子：

I'm aware it's not the most looking professional image slider but I'm just starting to get deeper into coding.我知道这不是最漂亮的专业形象 slider 但我才刚刚开始深入编码。

I appreciate all the help:) If someone needs more of the code, I'll provide it感谢所有帮助:) 如果有人需要更多代码，我会提供

If this helps, I'm using the source from here: GitHub如果这有帮助，我将使用此处的源代码： GitHub

Answer 1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    .one-container{
      border:2px solid blue;
      width: 210px;
      padding :20px;
      float:left;
    }
    .container-slide{
      border:1px solid black;
      height:210px;
      float:left;
    }
    i{
      float :left;
    }
    img{
      border:1px solid black;
      width:200px;
      height:200px;
      display:block;
      float: left;
    }
  </style>
<body>
<div class="one-container">
    // same as you done .... 
</div>
</body>
  <script>
                const repeatSlide = document.querySelector('.container-slide');
                const repeatImages = document.querySelectorAll('.container-slide img');

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

                let counter = 0;
                const size = repeatImages[0].clientWidth;

                repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
                // set the width calculation +2 for adjusting border can remove if no border to image.
                repeatSlide.style.width = ((size+2) * (repeatImages.length) ) + 'px';
                //Buttons
                nextBtn.addEventListener('click',() => {

                    if (counter >= repeatImages.length - 1) return;
                    repeatSlide.style.transition = "transform 0.4s ease-in-out";
                    counter++;
                    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';


                    });

                prevBtn.addEventListener('click',() => {

                    if (counter <= 0) return;
                    repeatSlide.style.transition = "transform 0.4s ease-in-out";
                    counter--;
                    repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

                    }); 

                // not clear what you want to do with this.

                repeatSlide.addEventListener('transitionend', () =>{
                    console.log(repeatImages[counter]);
                    if (repeatImages[counter].id === 'lastClone') {
                        repeatSlide.style.transition = "none";
                        counter = repeatImages.length - 1;
                        repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
                        }

                    if (repeatImages[counter].id === 'firstClone') {
                        repeatSlide.style.transition = "none";
                        counter = 0;
                        repeatSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
                        }
                    });
            </script>
</html>

我的图像 Slider 的脚本不起作用

问题描述

1 个解决方案

解决方案1
0 2020-05-24 13:29:27

我的图像 Slider 的脚本不起作用

问题描述

1 个解决方案

解决方案1 0 2020-05-24 13:29:27

解决方案1
0 2020-05-24 13:29:27