How to Move Images a Certain Amount of Pixels Using Javascript

I am trying to move images inside of a container using Javascript. Ultimately, I want to move it using setTimeout, but for now trying to do it using an event listener on a button click. It seems to work, but only once. I want to keep moving the images when the button is clicked. Any help is helpful and appreciated.

   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>
   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>
   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>
   <div class="images">
       <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"/>
   </div>


</div>

<button id="moveIt">MOVE</button>

<style>

.container {
display: flex;
justify-content: space-around;
overflow: hidden;
max-width: 100%;
z-index: 222;
}

.images {
width: 300px !important;
display: block;
text-align: center;
margin-right: 10px;
height: 400px !important;
}


</style>


<script> 

let images = document.querySelectorAll('.images');
const moveBtn = document.getElementById('moveIt');

let pleaseWork = () => {
   for(i=0; i < images.length; i++) {
   images[i].style.marginLeft = "-300px";
   }
 }
moveBtn.addEventListener('click', pleaseWork);

</script>

1 answer

  • answered 2021-11-23 02:00 Kinglish

    You are setting margin-left to a static number rather than incrementing it. Here's an example that accesses the current margin-left, strips it of the 'px', converts that to a number, then increments it and applies it back to the element.

    let images = document.querySelectorAll('.images');
    const moveBtn = document.getElementById('moveIt');
    let increment = -10
    let pleaseWork = () => {
      for (i = 0; i < images.length; i++) {
        let ml = Number(images[i].style.marginLeft.replaceAll('px', ''))
        ml += increment
        images[i].style.marginLeft = `${ml}px`;
      }
    }
    moveBtn.addEventListener('click', pleaseWork);
    .container {
      display: flex;
      justify-content: space-around;
      overflow: hidden;
      max-width: 100%;
      z-index: 222;
    }
    
    .images {
      width: 300px !important;
      display: block;
      text-align: center;
      margin-right: 10px;
      height: 400px !important;
    }
    <div class="images">
      <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
    </div>
    <div class="images">
      <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
    </div>
    <div class="images">
      <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
    </div>
    <div class="images">
      <img src="https://images.unsplash.com/photo-1596536220655-21429cf12ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
    </div>
    
    
    </div>
    
    <button id="moveIt">MOVE</button>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum