Event listener works only once

Question

I am trying to create a slider, and there is a button that I am using for moving the elements to the left. It works, but only once. After that the click has no effect. Here is my code below

HTML

<section class="section3">
  <button class="left">LEFT</button> <!-- button that I click on to move elements to the left -->
  <div class="carousel-container">
    <div class="corousel-element">1</div>
    <div class="carousel-element">2</div>
    <div class="carousel-element">3</div>
    <div class="carousel-element">4</div>
    <div class="carousel-element">5</div>
    <div class="carousel-element">6</div>
    <div class="carousel-element">7</div>
    <div class="carousel-element">8</div>
    <div class="carousel-element">9</div>
    <div class="carousel-element">10</div>
    <div class="carousel-element">11</div>
    <div class="carousel-element">12</div>
    <div class="carousel-element">13</div>
  </div>
</section>

CSS(SASS)

section.section3 {
  overflow: hidden;

  div.carousel-container {
    display: flex;
    overflow: hidden;
    justify-content: center;

    div.carousel-element {
      width: 169px;
      height: 193px;
      background: blue;
      flex-shrink: 0;
    }

    div.corousel-element:not(:first-child) {
      margin-left: 15px;
    }
  }
}

JAVASCRIPT

var buttonLeft = document.querySelector(".left"); // left button
var carouselContainer = document.querySelector(".corousel-container"); // carousel-container

function left() {
  carouselContainer.style.transform = "translate(-20px)"; // here I am trying to move elements to left with translate.
}

buttonLeft.addEventListener("click", left);

Answer 1

How about this? translateX(-???px) is determined by how many times the left button is pressed.

 // Get HTML elements const buttonLeft = document.querySelector(".left"); const section3 = document.querySelector(".section3"); const carouselContainer = document.querySelector(".carousel-container"); const crouselElements = document.querySelectorAll(".carousel-element"); // Moving distance of each click const dx = -20; // Store how many times the left button is clicked let counter = 0; function left() { // Get section3 width const section3Width = section3.offsetWidth; // Get one carousel element width = 169px const crouselElementWidth = crouselElements[0].offsetWidth; // Get sum of crousel elements width = 169px * 13 const crouselElementsWidth = crouselElementWidth * crouselElements.length; // Calculate movable distance const moveableDistance = crouselElementsWidth - section3Width; // When the slider reach the last element, stop moving. if (Math.abs(counter * dx) > moveableDistance) return; // Count up by 1 counter++; // Moving distance is -20px * count carouselContainer.style.transform = `translateX(${dx * counter}px)`; } buttonLeft.addEventListener("click", left);

 .section3 { overflow: hidden; }.carousel-container { display: flex; /* overflow: hidden; */ /* justify-content: center; */ transition: transform 0.4s linear; }.carousel-element { width: 169px; height: 193px; background: blue; flex-shrink: 0; }.carousel-element:nth-child(even) { background: red; }

 <section class="section3"> <button class="left">LEFT</button> <div class="carousel-container"> <div class="carousel-element">1</div> <div class="carousel-element">2</div> <div class="carousel-element">3</div> <div class="carousel-element">4</div> <div class="carousel-element">5</div> <div class="carousel-element">6</div> <div class="carousel-element">7</div> <div class="carousel-element">8</div> <div class="carousel-element">9</div> <div class="carousel-element">10</div> <div class="carousel-element">11</div> <div class="carousel-element">12</div> <div class="carousel-element">13</div> </div> </section>

---

Without width calculation

 // Get HTML elements const buttonLeft = document.querySelector(".left"); const carouselContainer = document.querySelector(".carousel-container"); // Moving distance let x = 0; function left() { // Update translateX's value every time carouselContainer.style.transform = `translateX(${x -= 20}px)`; } buttonLeft.addEventListener("click", left);

 .section3 { overflow: hidden; }.carousel-container { display: flex; /* overflow: hidden; */ /* justify-content: center; */ transition: transform 0.4s linear; }.carousel-element { width: 169px; height: 193px; background: blue; flex-shrink: 0; }.carousel-element:nth-child(even) { background: red; }

 <section class="section3"> <button class="left">LEFT</button> <div class="carousel-container"> <div class="carousel-element">1</div> <div class="carousel-element">2</div> <div class="carousel-element">3</div> <div class="carousel-element">4</div> <div class="carousel-element">5</div> <div class="carousel-element">6</div> <div class="carousel-element">7</div> <div class="carousel-element">8</div> <div class="carousel-element">9</div> <div class="carousel-element">10</div> <div class="carousel-element">11</div> <div class="carousel-element">12</div> <div class="carousel-element">13</div> </div> </section>