固定香草Javascript轮播的右键

Question

Against all reason, I'm trying to create a vanilla JavaScript carousel. I am having two problems: 1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen. 2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide. Here is the HTML code just for the carousel:

<div id = "container">
  <div id = "carousel">
   <div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
   <div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
   <div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
   <div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
  </div>
</div>

<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>

Here is the CSS code:

#container {
   position: absolute;
   top: 200px;
   left: 100px;
   width: 680px;
   height: 360px;
   white-space: nowrap;
   overflow:hidden;
}

#carousel {
   position: absolute;
   width: 2740px;
   height: 360px;
   white-space: nowrap;
   overflow: hidden;
   transition: left 300ms linear;
}

.slide {
   display: inline-block;
   height: 360px;
   width: 680px;
   padding: 0;
   margin: 0;
   transition: left 300ms linear;
}

.slideImage {
   position:relative;
   height: 360px;
   width: 680px;
   float: left;
}

.button {
   position: absolute;
   top: 340px;
   height: 60px;
   width: 60px;
   border-bottom: 12px solid red;
}

#left {
   left: 115px;
   border-left: 12px solid red;
   transform: rotate(45deg);
}

#right {
   left: 693px;
   border-right: 12px solid red;
   transform: rotate(-45deg);
}

Here is the JavaScript:

var carousel = document.querySelector('#carousel');
var firstVal = 0;

document.querySelector('#left').addEventListener("click", moveLeft);

function moveLeft (){
  firstVal +=685;
  carousel.style.left = "-"+firstVal+"px";
};

document.querySelector('#right').addEventListener("click", moveRight);

function moveRight() {
  firstVal +=685;
  carousel.style.left = "+"+firstVal+"px";
};

Here is a JSFiddle so that you can see what I mean: " https://jsfiddle.net/way81/8to1kkyj/ "

I appreciate your time in reading my question and any help would be much appreciated.

Answer 1

Ofcourse it goes from -685px on left click and then to +1370px the next right click; You are always adding 685 to your firstVal variable.

firstVal = 0
//firstVal is worth 0

moveLeft()
//firstVal is now worth 685

moveRight()
//firstVal is now worth 1370.

The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal )

Instead, write them like this

function moveLeft (){
  firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
  carousel.style.left = firstVal + "px";
};

function moveRight() {
  firstVal +=685;
  carousel.style.left = firstVal + "px";
};

Answer 2

 var left = document.getElementById("left"); left.addEventListener("click", moveLeft, false); var right = document.getElementById("right"); right.addEventListener("click", moveRight, false); var carousel = document.getElementById("carousel"); var images = document.getElementsByTagName("img"); var position = 0; var interval = 685; var minPos = ("-" + interval) * images.length; var maxPos = interval * images.length; //slide image to the left side <-- function moveRight() { if (position > (minPos + interval)) { position -= interval; carousel.style.left = position + "px"; } if (position === (minPos + interval)) { right.style.display = "none"; } left.style.display = "block"; } //slide image to the right side --> function moveLeft() { if (position < (maxPos - interval) && position < 0) { position += interval; carousel.style.left = position + "px"; } if (position === 0) { left.style.display = "none"; } right.style.display = "block"; } 

  #container { position: absolute; top: 200px; left: 100px; width: 680px; height: 360px; white-space: nowrap; overflow: hidden; } #carousel { position: absolute; width: 2740px; height: 360px; white-space: nowrap; overflow: hidden; transition: left 300ms linear; } .slide { display: inline-block; height: 360px; width: 680px; padding: 0; margin: 0; transition: left 300ms linear; } .slideImage { position: relative; height: 360px; width: 680px; float: left; } .button { position: absolute; top: 340px; height: 60px; width: 60px; border-bottom: 12px solid red; } #left { left: 115px; border-left: 12px solid red; transform: rotate(45deg); display: none; } #right { left: 693px; border-right: 12px solid red; transform: rotate(-45deg); } 

 <div id="container"> <div id="carousel"> <div class="slide"> <img class="slideImage" class="active" src="sithCover.png" alt="slide1"> </div> <div class="slide"> <img class="slideImage" src="darthVader.png" alt="slide2"> </div> <div class="slide"> <img class="slideImage" src="darthSidious.png" alt="slide3"> </div> <div class="slide"> <img class="slideImage" src="kyloRen.png" alt="slide4"> </div> </div> </div> <div id="left" class="button"></div> <div id="right" class="button"></div>