Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

I am experiencing difficulties with my Image slider in my JavaScript code (common for beginners).

Closed. To get answers, your question needs to be focused. Edit your question to concentrate on one problem only.
Do you want to improve the question? Update the question by editing the post and make it concentrate on only one problem.

Closed 2 hours ago.

Improve the question As a beginner in CSS, JavaScript, and HTML, I wanted to try a new image slider project. However, I have hit a roadblock when I reached the JavaScript part of the code. I have this piece of code:

You can find the whole project here:https://www.youtube.com/watch?v=EWv2jnhZErc&abchannel=JavaScriptKing (project 13 - Image Slider)

const nextEl = document.querySelector(".next")

const imageContainerEl = document.querySelector(".image-container")

let currentImg = 1

nextEl.addEventListener("click", () => {
  currentImg++
  updateImg()
})

function updateImg() {
  updateImg.style.transform = 'translateX(-$({currentImg-1)*600}px)'
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  background-color: rgba(69, 84, 51, 255);
}

.slider-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .7);
}

.image-container {
  display: flex;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(255, 255, 255);
  font-size: 20px;
  cursor: pointer;
  opacity: 30%;
}

.btn.prev {
  left: 10px;
}

.btn.next {
  right: 10px;
}

.btn:hover {
  opacity: 70%;
  transition: opacity 0.5s ease;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Image Slider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="slider-container">
    <div class="image-container">
      <img src="https://fastly.picsum.photos/id/11/600/400.jpg?hmac=YXaIAB-BXqL43ZvInwvfKSwWwiKng4yQp9vCc4xSI" alt="river">
      <img src="https://fastly.picsum.photos/id/676/600/400.jpg?hmac=hiwD-uE03CnMeH5-cLohsEw-XT5K9yDySTeFTOwrDik" alt="mountain">
      <img src="https://fastly.picsum.photos/id/615/600/400.jpg?hmac=xwGdaLFqV2FaWCThluHYqWoSYkMWebKiQFxDPpqVrN4" alt="water">
      <img src="https://fastly.picsum.photos/id/641/600/400.jpg?hmac=_vnbhH-3orr6cFF76sXFWxwPrKWV6-a619fUK-EPY-c" alt="beach">
    </div>
    <i class="fa-solid fa-chevron-right btn next"></i>
    <i class="fa-solid fa-chevron-left btn prev"></i>
Answers(2)
avatar
Vogi
a month ago
Verified Answer
I see that you are trying to create an image slider project. I found a tutorial on how to create an image slider using JavaScript on Wondershare that you might find helpful. In the code you provided, it seems that there is an error in the updateImg() function. The function should update the style of imageContainerEl instead of itself. Here is the corrected code: 
const nextEl = document.querySelector(".next")

const imageContainerEl = document.querySelector(".image-container")

let currentImg = 1

nextEl.addEventListener("click", () => {
  currentImg++
  updateImg()
})

function updateImg() {
  imageContainerEl.style.transform = `translateX(-${(currentImg-1)*600}px)`
}
I hope this helps! Let me know if you have any other questions.

Sources

How To Create a Slideshow - W3SchoolJavaScript Image Slider [ How To Build One ] - Alvaro TrigoHow to Create Image Slider using JavaScript - WondershareSliding image using JavaScript - Stack Overflow
avatar
Tolerim
a month ago
Looking at the code snippet provided, there is a syntax error in the updateImg function. The line updateImg.style.transform = 'translateX(-$({currentImg-1)*600}px)' should use backticks instead of single quotes so that the ${} interpolation works. It should look like this: 
function updateImg() {
  imageContainerEl.style.transform = `translateX(-${(currentImg-1)*600}px)`
}
This will fix the issue and allow the image slider to work properly.
;