Javascript: How to alter CSS transform in Javascript?

Question

I am working on a slideshow and employing the transform style of a div.

 const prevSlide = document.getElementById('prev-slide'); const nextSlide = document.getElementById('next-slide'); const slides = document.getElementById('slides'); const slideList = [document.getElementsByClassName('slide-li')]; let slideNode = slideList[0] let slideWidth = slideNode[0].clientWidth; let slide = 0; nextSlide.addEventListener('click', function e(){ if (slide <= 0 && slide > -(slideWidth * (slideNode.length - 1))){ slide -= slideWidth; slidePx = slide.toString() + "px"; slides.style.transform = "translate("+slidePx+", 0px);"; } else{ slide = 0; slides.style.transform = "translate(0px, 0px);"; } }) prevSlide.addEventListener('click', function e(){ if (slide < 0){ slide += slideWidth; slidePx = slide.toString() + "px"; slides.style.transform = "translate("+slidePx+", 0px);"; } else{ slide = slideWidth * (slideNode.length - 1); slidePx = slide.toString() + "px"; slides.style.transform = "translate("+slidePx+", 0px);"; } })

 body { background-color : white; } #slide-container { margin : 0 auto; width : 500px; overflow : hidden; position : relative; } #slides { margin : 0 auto; height : 400px; width : 2000px; overflow : hidden; display : block; transition : 1s ease; } #slides:after { content : ""; display : table; clear : both; } .slide-li { margin : 0; display : inline; width : 25%; overflow : hidden; float : left; } .slide-li img { width : 500px; margin : auto; } #prev-slide, #next-slide { color : white; padding : 10px; font-size : 20px; cursor : pointer; z-index : 5; position : absolute; top : 40%; font-weight : bold; text-decoration : none; transition : 0.5s ease; } #prev-slide { left : 0; } #next-slide { right : 0; } #prev-slide:hover, #next-slide:hover { background-color : #000000aa; }

 <div id="slide-container"> <div id="slides"> <span class="slide-li"><img src="https://picsum.photos/id/1041/500/400/"></span> <span class="slide-li"><img src="https://picsum.photos/id/1035/500/400"></span> <span class="slide-li"><img src="https://picsum.photos/id/1040/500/400"></span> </div> <a class="btn" id="prev-slide">&#10094;</a> <a class="btn" id="next-slide">&#10095;</a> </div>

When I try to click either button to slide the slideshow, it doesn't translate.

When I try to log the transform property, I don't see any.

I am pretty sure that I made a mistake concerning the transform property, but I can't find it. What is the problem?

Answer 1

Remove the semicolons from within the string literals on your style.transform lines.

They should look like this:

slides.style.transform = "translate("+slidePx+", 0px)";

Instead of this:

slides.style.transform = "translate("+slidePx+", 0px)";

 const prevSlide = document.getElementById('prev-slide'); const nextSlide = document.getElementById('next-slide'); const slides = document.getElementById('slides'); const slideList = [document.getElementsByClassName('slide-li')]; let slideNode = slideList[0] let slideWidth = slideNode[0].clientWidth; let slide = 0; nextSlide.addEventListener('click', function e(){ if (slide <= 0 && slide > -(slideWidth * (slideNode.length - 1))){ slide -= slideWidth; slidePx = slide.toString() + "px"; slides.style.transform = "translate("+slidePx+", 0px)"; } else{ slide = 0; slides.style.transform = "translate(0px, 0px)"; } }) prevSlide.addEventListener('click', function e(){ if (slide < 0){ slide += slideWidth; slidePx = slide.toString() + "px"; slides.style.transform = "translate("+slidePx+", 0px)"; } else{ slide = slideWidth * (slideNode.length - 1); slidePx = slide.toString() + "px"; slides.style.transform = "translate("+slidePx+", 0px)"; } })

 body { background-color : white; } #slide-container { margin : 0 auto; width : 500px; overflow : hidden; position : relative; } #slides { margin : 0 auto; height : 400px; width : 2000px; overflow : hidden; display : block; transition : 1s ease; } #slides:after { content : ""; display : table; clear : both; } .slide-li { margin : 0; display : inline; width : 25%; overflow : hidden; float : left; } .slide-li img { width : 500px; margin : auto; } #prev-slide, #next-slide { color : white; padding : 10px; font-size : 20px; cursor : pointer; z-index : 5; position : absolute; top : 40%; font-weight : bold; text-decoration : none; transition : 0.5s ease; } #prev-slide { left : 0; } #next-slide { right : 0; } #prev-slide:hover, #next-slide:hover { background-color : #000000aa; }

 <div id="slide-container"> <div id="slides"> <span class="slide-li"><img src="https://picsum.photos/id/1041/500/400/"></span> <span class="slide-li"><img src="https://picsum.photos/id/1035/500/400"></span> <span class="slide-li"><img src="https://picsum.photos/id/1040/500/400"></span> </div> <a class="btn" id="prev-slide">&#10094;</a> <a class="btn" id="next-slide">&#10095;</a> </div>

Answer 2

You do not need to put a semicolon while changing transform property with JS. Just use slides.style.transform = `translate(${slidePx}, 0px)`;

 const prevSlide = document.getElementById("prev-slide"); const nextSlide = document.getElementById("next-slide"); const slides = document.getElementById("slides"); const slideList = [document.getElementsByClassName("slide-li")]; let slideNode = slideList[0]; let slideWidth = slideNode[0].clientWidth; let slide = 0; nextSlide.addEventListener("click", function e() { if (slide <= 0 && slide >- slideWidth * (slideNode.length - 1)) { slide -= slideWidth; slidePx = slide.toString() + "px"; slides.style.transform = `translate(${slidePx}, 0px)`; } else { slide = 0; slides.style.transform = "translate(0px, 0px)"; } }); prevSlide.addEventListener("click", function e() { if (slide < 0) { slide += slideWidth; slidePx = slide.toString() + "px"; slides.style.transform = "translate(" + slidePx + ", 0px)"; } else { slide = slideWidth * (slideNode.length - 1); slidePx = slide.toString() + "px"; slides.style.transform = "translate(" + slidePx + ", 0px)"; } });

 body { background-color: white; } #slide-container { margin: 0 auto; width: 500px; overflow: hidden; position: relative; } #slides { margin: 0 auto; height: 400px; width: 2000px; overflow: hidden; display: block; transition: 1s ease; } #slides:after { content: ""; display: table; clear: both; } .slide-li { margin: 0; display: inline; width: 25%; overflow: hidden; float: left; } .slide-li img { width: 500px; margin: auto; } #prev-slide, #next-slide { color: white; padding: 10px; font-size: 20px; cursor: pointer; z-index: 5; position: absolute; top: 40%; font-weight: bold; text-decoration: none; transition: 0.5s ease; } #prev-slide { left: 0; } #next-slide { right: 0; } #prev-slide:hover, #next-slide:hover { background-color: #000000aa; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="slide-container"> <div id="slides"> <span class="slide-li"><img src="https://source.unsplash.com/random/800x600" /></span> <span class="slide-li"><img src="https://source.unsplash.com/random/800x600" /></span> <span class="slide-li"><img src="https://source.unsplash.com/random/800x600" /></span> </div> <a class="btn" id="prev-slide">&#10094;</a> <a class="btn" id="next-slide">&#10095;</a> </div> </body> </html>

That is all you need to solve your problem. Happy coding.

Answer 3

just replace

slidePx = slide.toString() + "px";
slides.style.transform = `translate(${slidePx}, 0px);`;

by

 slides.style = `transform : translate(${slide}px, 0px)`

But you can simplify your code to:

const
  prevSlide  = document.getElementById('prev-slide')
, nextSlide  = document.getElementById('next-slide')
, slides     = document.getElementById('slides')
, slideList  = document.querySelectorAll('.slide-li')
, slideWidth = slideList[0].clientWidth
   ;
let slide = 0; 
   
nextSlide.onclick = e =>
  {
  slide = ++slide % slideList.length
  slides.style = `transform : translate(${-slide * slideWidth}px, 0px)`
  }
prevSlide.onclick = e =>
  {
  slide = (--slide + slideList.length) % slideList.length
  slides.style = `transform : translate(${-slide * slideWidth}px, 0px)`
  }

I also corrected other small errors

 const prevSlide = document.getElementById('prev-slide') , nextSlide = document.getElementById('next-slide') , slides = document.getElementById('slides') , slideList = [document.getElementsByClassName('slide-li')] ; let slideNode = slideList[0] , slideWidth = slideNode[0].clientWidth , lastImgNo = slideNode.length - 1 , slide = 0 ; nextSlide.onclick = e => { if (slide <= 0 && slide > -(slideWidth * lastImgNo)) { slide -= slideWidth } else { slide = 0 } slides.style = `transform : translate(${slide}px, 0px)` } prevSlide.onclick = e => { if (slide < 0) { slide += slideWidth } else { slide = slideWidth * lastImgNo * -1 } slides.style = `transform : translate(${slide}px, 0px)` }

 body { background-color : white; } #slide-container { margin : 0 auto; width : 500px; overflow : hidden; position : relative; } #slides { margin : 0 auto; height : 400px; width : 2000px; overflow : hidden; display : block; transition : 1s ease; } #slides:after { content : ""; display : table; clear : both; } .slide-li { margin : 0; display : inline; width : 25%; overflow : hidden; float : left; } .slide-li img { width : 500px; margin : auto; } #prev-slide, #next-slide { color : white; padding : 10px; font-size : 20px; cursor : pointer; z-index : 5; position : absolute; top : 40%; font-weight : bold; text-decoration : none; transition : 0.5s ease; } #prev-slide { left : 0; } #next-slide { right : 0; } #prev-slide:hover, #next-slide:hover { background-color : #000000aa; }

 <div id="slide-container"> <div id="slides"> <span class="slide-li"><img src="https://picsum.photos/id/1041/500/400/"></span> <span class="slide-li"><img src="https://picsum.photos/id/1035/500/400"></span> <span class="slide-li"><img src="https://picsum.photos/id/1040/500/400"></span> </div> <a class="btn" id="prev-slide">&#10094;</a> <a class="btn" id="next-slide">&#10095;</a> </div>