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

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

user_11451181 · Answer

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;
}

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;
}

Event listener works only once

1 Answers