香草javascript轮播不滑动

Question

i have a simple carousel with main div. inside the main div there is a ul that has width of 6000px that slides whenever i click either of right or left arrows.

i attached event listeners to both the arrows so when i click left arrow I add 300px to the current marginLeft of that ul(slider) and marginRight 300px for the right arrow.

Problem 1: when i click left arrow the ul(slider) moves but only 1 time when i click second time it doesn't move even though i add 300px to marginLeft instead of just adding 300px which is a common mistake i seen.

Problem 2: the right arrow when i click it doesn't slide the ul(slider) at all.

Codepen : https://codepen.io/anon/pen/bXBaYW?editors=0110

const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');

function scrollLeft() {
    slides.style.marginLeft += '300px';
    console.log(slides.style.marginLeft);
}

function scrollRight() {
    slides.style.marginLeft -= '300px';
    console.log(slides.style.marginLeft);
}

leftArrow.addEventListener('click' , scrollLeft);
rightArrow.addEventListener('click' , scrollRight);

Answer 1

Firstly you should increase like this:

 let marginLeft = 0; /* first define this as global */
 marginLeft += 300;
 slides.style.marginLeft = marginLeft + "px";

Because, "300px" + "300px" = "300px300px" The way you do it, it's become wrong.

And you can't get style like element.style.marginLeft .

Should use getComputedStyle(element).property

This is works.

 const carousel = document.getElementById('carousel'); const leftArrow = carousel.querySelector('.carousel-left-arrow'); const rightArrow = carousel.querySelector('.carousel-right-arrow'); const slides = carousel.querySelector('.slides'); let marginLeft = 0; function scrollLeft() { marginLeft += 300; slides.style.marginLeft = marginLeft + "px"; console.log(getComputedStyle(slides).marginLeft); } function scrollRight() { marginLeft -= 300; slides.style.marginLeft = marginLeft + "px"; console.log(getComputedStyle(slides).marginLeft); } leftArrow.addEventListener('click', scrollLeft); rightArrow.addEventListener('click', scrollRight); 

 #carousel { width: 90%; margin: 0 auto; margin-top: 20px; overflow: hidden; position: relative; } #carousel .arrow { position: absolute; top: 32%; background-color: rgba(255, 255, 255, 0.7); border-radius: 0%; cursor: pointer; width: 20px; } #carousel .arrow img { margin-top: 10px; max-width: 100%; } #carousel .carousel-left-arrow { width: 25px; left: 0; margin-left: 5px; } #carousel .carousel-right-arrow { right: 0; width: 25px; } #carousel .slides { width: 6000px; overflow: hidden; list-style: none; padding: 0; transition: 0.2s; margin-left: 0; margin-right: 0 } #carousel .slide { float: left; margin: 0 5px; text-decoration: none; transform: 0.2s; color: whitesmoke; } #carousel .slides img { width: 300px } 

 <div id="carousel"> <span class="carousel-left-arrow arrow"><</span> <ul class="slides"> <a href='#' class="slide"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> <a href='#' class="slide"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> <a href='#' class="slide"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> <a href='#' class="slide"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> <a href='#' class="slide"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> <a href='#' class="slide"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a> </ul> <span class="carousel-right-arrow arrow">></span> </div>