Trying to create an image slider, but I'm encountering numerous challenges. It seems like everyone finds it easy to do, but for me, it's a struggle. I've been following along with this tutorial.
However, the buttons don't work as expected, and the images are not fitting inside the container. At this point, even if only three images show up, I just want it to function properly.
I intended for one picture to display at a time, but instead, two or more pictures are appearing together in the container.
Since I am relatively new to this, I will continue trying to understand and solve the issue as it is essential for my personal project. Can anyone assist me by explaining what I might be doing wrong?
HERE IS MY CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="gallery.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
...
(same HTML code as provided)
...
CSS:
*{
padding:0px;
...(CSS details can be added if needed)...JAVASCRIPT:
const carouselSlide = document.querySelector('.slide');
...(JavaScript code can be added if needed)...