Keeping the position of an element with transform property when resizing the browser

Question

I am trying to create a slider and everything works well, but when i resize the browser the position of the elements is resizing too and that is because when i click on the arrows of the slider i apply to each element a transform: translateX() .

If i don't resize the browser the slider works like it should.Is there a way to stop changing the position of the elements when the browser is resized and stop them moving?

When you run the code put it in full page and after clicking the arrows resize the window to see what I am talking about.

I couldn't find a solution so any help is really appreciated.You can find the code below.

 const rightArrow = document.querySelector('.right'); const leftArrow = document.querySelector('.left'); const movieTitles = document.querySelectorAll('.movie-title'); const movieContainer = document.querySelector('.movie-container'); const arrowRight = document.querySelector('.fa-chevron-right'); let movieCounter = 0; let rightStop = 0; const carouselSlide = function() { if(this.classList.contains('left') && allSlideWidth === 0) return; let containerWidth; let paddingLeft; let paddingRight; movieContainerChilds = [...movieContainer.children]; containerWidth = +window .getComputedStyle(movieContainer) .getPropertyValue('width') .slice(0, -2); paddingLeft = +window. getComputedStyle(movieContainer) .getPropertyValue('padding-left') .slice(0, -2); paddingRight = +window .getComputedStyle(movieContainer) .getPropertyValue('padding-right') .slice(0, -2); let movieTitleWidth = Number(movieContainerChilds[0].getBoundingClientRect().width) + 4; rightStop = Math.round((+containerWidth - (+paddingLeft + +paddingRight)) / movieTitleWidth); if(this.classList.contains('right')) { allSlideWidth += Math.round(+containerWidth - (+paddingLeft + +paddingRight)); movieCounter += rightStop; } if(this.classList.contains('left')) { allSlideWidth -= Math.round(+containerWidth - (+paddingLeft + +paddingRight)); movieCounter -= rightStop; }; movieContainerChilds.forEach((movie) => { if(movieContainerChilds.length - rightStop <= movieCounter + rightStop) { movie.style.transform = `translateX(-${allSlideWidth + (Math.round(movieTitleWidth) * (movieContainerChilds.length - (movieCounter + rightStop)))}px`; } else {movie.style.transform = `translateX(-${allSlideWidth}px)`; } }) movieContainer.addEventListener('transitionend', function() { allSlideWidth > 0 ? leftArrow.style.display = 'flex' : leftArrow.style.display = 'none'; movieContainerChilds.length - rightStop <= movieCounter + rightStop ? rightArrow.style.display = 'none' : rightArrow.style.display = 'flex'; rightArrow.addEventListener('click', carouselSlide); leftArrow.addEventListener('click', carouselSlide); }) movieContainer.addEventListener('transitionstart', function() { rightArrow.removeEventListener('click', carouselSlide); leftArrow.removeEventListener('click', carouselSlide); }) } let allSlideWidth = 0; rightArrow.addEventListener('click', carouselSlide); leftArrow.addEventListener('click', carouselSlide);

 * { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 0; background: #161414; overflow: hidden; } section { overflow-x: visible; width: 100%; position: relative; } .movie-container { padding: 0 60px; margin-top: 20px; white-space: nowrap; transition: .7s ease all; } .movie-container::-webkit-scrollbar { display: none; } .movie-title { display: inline-block; width: calc(16.66666% - 4px); height: 250px; padding: 0; margin: 0; transition: .7s ease all; margin-bottom: -10px; } .movie-title:hover { transform: scale(1.5); } .movie-title img { display: inline-block; width: 100%; height: 100%; border-radius: 5px; } .left, .right { position: absolute; background: rgb(0, 0, 0, .3); height: 100%; width: 60px; top: 0; font-size: 2rem; display: flex; justify-content: center; align-items: center; color: white; cursor: pointer; } .left { left: -4px; border-radius: 0 5px 5px 0; height: 100%; display: none; } .right { right: 0.1px; border-radius: 5px 0 0 5px; height: 100%; } .right:hover, .left:hover { background: rgb(0, 0, 0, .65); } @media (max-width: 1400px) { .movie-title { width: calc(20% - 4px); } } @media (max-width: 1000px) { .movie-title { width: calc(25% - 4px); } } @media (max-width: 800px) { .movie-container { padding: 0 20px; overflow-x: scroll; } .movie-title { width: 32.88888666%; margin-right: 4px; } .left, .right { display: none; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> </head> <body> </div> <section> <div class="movie-container"> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> </div> <div class="left"><i class="fas fa-chevron-left"></i></div> <div class="right"><i class="fas fa-chevron-right"></i></div> </section> </body> </html>

Answer 1

You are using two transforms:

.movie-title: hover {
     transform: scale (1.5);
}

When you add it, the previous one collapses

translateX (0px);

transform: translateX(0px) scale(1.5); <--- That's right

So wrong, because one deletes the other

transform: scale(1.5); 
transform: translateX(0px);

You can simply add one div:

HTML

 .test:hover { transform: scale(1.5); }

 <div class="movie-title"> <div class="test"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> <div> </div>

It works, good luck