I am trying to make a carousel and i can not get the JavaScript to work at all. I am really bad at JS and need help finding out why i cant get it to work. This isnt the full final product, right now im just trying to get it to scroll when i click the button that's it. Since i do not know JS i was following a youtube tutorial and i followed it exact and still cant get it to move. i tried a few different ways even trying to put the JS code directly in the HTML and im at a loss.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="slider.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div class="carousel-container">
<div class="carousel-slide">
<img src="im3.JPG" id="lastclone">
<img src="im1.JPG">
<img src="im3.JPG">
<img src="im1.JPG" id="fistclone">
</div>
</div>
<button id="prevBtn" onclick="changestate()">prev</button>
<button id="nextBtn" onclick="changestate()">next</button>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and for my JS
const carouselslide = document.querySelector('.carousel-slide');
const carouselimage = document.querySelectorAll('.carousel-slide img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//counter
let counter = 1;
const size = carouselimage[0].clientwidth;
carouselslide.style.transform = 'translateX(' + (-size * counter) + 'px)';
//Button listiner
nextBtn.addEventListener('click', () => {
carouselslide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselslide.stle.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevBtn.addEventListener('click', () => {
carouselslide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselslide.stle.transform = 'translateX(' + (-size * counter) + 'px)';
});
vipul patel :
You have two click listener.\n\none is :\n\n<button id=\"prevBtn\" onclick=\"changestate()\">prev</button>\n\n\nand other is :\n\nprevBtn.addEventListener('click', () => {\n carouselslide.style.transition = \"transform 0.4s ease-in-out\";\n counter--;\n carouselslide.stle.transform = 'translateX(' + (-size * counter) + 'px)';\n});\n\n\nWhile clicking, it tries to call changestate method which does not exist.\n\nPlease remove one of them and keep one.",
2019-11-05T04:16:48