I need to code a slider gallery where seven images of different sizes slide to left or right if you use the left or right key. As the fourth image leaves, the first one follows as if it were the fifth. use tweens.

var slider = {
  images: [
    'http://placehold.it/350x150',
    'http://placehold.it/450x250',
    'http://placehold.it/550x350',
    'http://placehold.it/650x450',
    'http://placehold.it/750x550',
    'http://placehold.it/850x650',
    'http://placehold.it/950x750'
  ],
  el: document.getElementById('slider'),
  calcPosition: function (index) {
    return index * (-100) + '%';
  },
  setPosition: function (index, element) {
    element.style.left = this.calcPosition(index);
  },
  setSlides: function () {
    var self = this;
    this.images.forEach(function (image, index) {
      var slide = document.createElement('div');
      slide.className = 'slide';
      slide.style.backgroundImage = 'url(' + image +