I am trying to create a manual slideshow which animates a translation of four images left or right depending on which button is pressed uncovering four new ones and hiding the old. All of the logic works except that I can't figure out how to animate the transition. I have tried various things in my javascript file such as `album_covers[n].style.transition = "translate 1.0s linear 0s";` (as you will see in the below code 'album\_covers' is an array consisting of all images selected by the class of 'album-cover' from the html). I'm not sure if the way I am trying to do things is possible or if I will have to resort to another technique such as keyframes. Any insights for a CSS/Javascript newb?

**HTML**

```
<html>
  <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
  </head>
  <body>
    <div class="image-container">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/008/786/475/cover-2153.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover"src="https://images.8tracks.com/cover/i/009/883/162/tumblr_nra20qoAw41qzp1j8o2_1280-9783.gif?rect=59,0,432,432&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/564/192/7329ec2b80938b862b24175cf8445ea8-1868.jpg?rect=0,73,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/732/575/7841098526_510abd2ec7_o-7993.jpg?rect=92,0,1536,1536&q=98&fm=jpg&fit=max&w=1024&h=1024">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/000/655/115/46099_10151436554292625_1248862229_n-5573.jpg?rect=133,0,633,633&q=98&fm=jpg&fit=max"> 
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/077/003/tumblr_o77rkhnJGF1vutacho1_500-6413.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">  
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/919/152/25820d4a20ddca732d0220000b0fa723-8821.jpg?rect=120,0,398,398&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/001/693/941/Sherlock_S03E03_1080p_kissthemgoodbye_net_5000-3819.jpg?rect=0,0,1072,1072&q=98&fm=jpg&fit=max&w=1024&h=1024">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/149/601/405867_2930131703040_1104257610_n-956.jpg?rect=159,0,641,641&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/158/250/Angbang-smut_copy-7358.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/341/098/Kylux_copy-again-4632.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/279/809/0aa2af1665e66735f5a9b50e16051274-4133.jpg?rect=0,0,640,640&q=98&fm=jpg&fit=max">
    </div>
    <button id="left-button">
      <i class="fa fa-chevron-left"></i>
    </button>
    <button id="right-button">
      <i class="fa fa-chevron-right"></i>
    </button>
  </body>
</html>

```

**CSS**

```
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.image-container {
  height: 300px;
  width: 1260px;
  margin: 50px 40px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.image-container img {
  height: 100%;
  margin-left:5px;
  margin-right: 5px;
  transform: translate(0%, 0px);
}

```

**Javascript**

```
var counter = 0;
var max_album_sections = 2;
var album_covers = document.getElementsByClassName("album-cover");
console.log(album_covers);
document.getElementById("left-button").addEventListener("click", function() {navGallery(-1)});
document.getElementById("right-button").addEventListener("click", function() {navGallery(1)});

function translateImage() {
  var amount = String(-418*counter) + "%";
  for(var n = 0; n < album_covers.length; n++) {
    album_covers[n].style.transition = "translate 1.0s linear 0s";
    album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");
  }
}

function navGallery(increment) {
  if(counter < max_album_sections && counter > 0) {
    counter = counter + increment;
    translateImage();
  }
  if(counter == max_album_sections && increment < 0) {
    counter = counter + increment;
    translateImage();
  }
  if(counter == 0 && increment > 0) {
    counter = counter + increment;
    translateImage();
  }
}

```