title: Having issues on my image slider, and really not sure why
body: <p>Trying to do an image slider but nothing works. I am having so much difficulty with something that everyone keeps saying pretty easy to do. I been going along with this tutorial.</p>
  <p><a href="https://www.youtube.com/watch?v=KcdBOoK3Pfw&amp;list=WL&amp;index=19&amp;t=601s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=KcdBOoK3Pfw&amp;list=WL&amp;index=19&amp;t=601s</a></p>
  <p>Yet the button doesn't seem to work. The Images wont fit inside. I don't care if three of them show up at this point I just want it to work.</p>
  <p>The images won't just go into the container. They all go in. The 2 in one wasn't my intention. I wanted one pic than the next pic shows.</p>
  <p>I'm still pretty new to this. So probably will keep on trying and trying and understanding but trying to finish this for a personal project. Can anyone help out and explain to me what I am doing wrong.</p>
  <p>HERE IS MY CODE:</p>
  <p>HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;gallery.css&quot;&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;container&quot;&gt;
  
      &lt;div class=&quot;slide&quot;&gt;
      &lt;img src=&quot;./image/pic7.jpg&quot; id=&quot;lastClone&quot;&gt;
      
      &lt;img src=&quot;image/pic1.jpg&quot;&gt;
      
      &lt;img src=&quot;image/pic2.jpg&quot;&gt;
      
      &lt;img src=&quot;image/pic3.jpg&quot;&gt;
      
      &lt;img src=&quot;image/pic4.jpg&quot;&gt;
  
      
      &lt;img src=&quot;image/pic6.jpg&quot;&gt;
      
      &lt;img src=&quot;image/pic7.jpg&quot;&gt;
      &lt;img src=&quot;./image/pic1.jpg&quot; id=&quot;firstclone&quot;&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;button id=&quot;prevbtn&quot;&gt;Prev&lt;/button&gt;
  &lt;button id=&quot;nextbtn&quot;&gt;Next&lt;/button&gt;
  
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>*{
      padding:0px;
      margin:0px;
      box-sizing: border-box;
  }
  
  .container {
      width: 40%;
      margin:auto;
      border: 5px solid black;
      overflow:hidden;
      
     
  }
  
  .slide {
      display:flex;
      width:100%;
      height:500px;
      
  }
  
  
  button{
      padding:20px;
      border:none;
      background:#37f;
      font-size: 30px;
      color:white;
      position:absolute;
      top:45%;
  }
  
  
  #nextbtn{
      border-radius: 10px 0px 0px 10px;
      margin-left:950px;
  }
  #prevbtn{
      border-radius: 0px 10px 10px 0px;
  }
  </code></pre>
  <p>JAVASCRIPT:</p>
  <pre><code>const carouselSlide =docuement.querySelector('.slide');
  const carouselImages=document.querySelectorAll('.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',()=&gt;{
      if (counter &gt;= carouselImages.length-1) return;
      carouselSlide.style.transition = &quot;transform 0.4s ease-in-out&quot;;
      counter ++;
      carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  
  });
  
  
  prevbtn.addEventListener('click',()=&gt;{
      if (counter &lt;= 0) return;
      carouselSlide.style.transition = &quot;transform 0.4s ease-in-out&quot;;
      counter ++;
      carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  
  });
  
  carouselSlide.addEventListener('transitionend', () =&gt; {
      if (carouselImages[counter].id=='lastClone') {
          carouselSlide.style.transition = &quot;none&quot;;
          counter=carouselImages.length -2;
          carouselSlide.style.transform= 'translateX(' +(-size * counter) + 'px)';
      }
  
      
      if (carouselImaages[counter].id=='firstClone') {
              carouselSlide.style.transition = &quot;none&quot;;
              counter=carouselImaages.length -counter;
              carouselSlide.style.transform= 'translateX(' +(-size * counter) + 'px)';
          }
  });
  </code></pre>