Images in a carousel aren't not moving

Question

I'am doing a carousel exercise. I can't tell why the content is not moving. This exercise comes from Javascript.info

https://javascript.info/task/carousel javascritp.info has proposed a solution, but I want to do it with a alternative way.

I tested with console.log and alert: The newPosition variable seems to change every time when for...of loops runs. But when it comes to assignment of image.style.left to newPosition, the images just won't slide. Thanks for your help !

Here is my code :

let container = document.querySelector('#container');
let images = document.querySelectorAll('li');
let nextArrow = document.querySelector('.next')

let move = {
        toRight(e){
    for(let image of images ){
        let newPosition = image.getBoundingClientRect().left - image.clientWidth;
        image.style.left = newPosition + 'px';
    }
}
}

nextArrow.addEventListener('click', move.toRight);

.arrow {
  padding: 0;
  background: #ddd;
  border-radius: 15px;
  border: 1px solid gray;
  font-size: 24px;
  line-height: 24px;
  color: #444;
  display: block;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  background: #ccc;
  cursor: pointer;
}

ul {
  position:absolute;
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
  left : 5px;
  top:10px;
}

ul img {
  width: 130px;
  height: 130px;
  display: block; 
  padding:5px;
}

ul li {
  display: inline-block; 
}

#container{
  position : relative;
  width:430px;
  height:150px;
  background-color: red;
}

  <button class="arrow next">⇨</button>
  
  <div id = 'container'> 
  <ul>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
  </ul>
 <div>

jsfiddle link