Edit in JSFiddle

var ImageSlider = Ractive.extend({
  oninit: function() {
    var self = this;

    self.startSlideshow();
    self.set('_index', 10000 * self.get('images').length);
    self.set('activeImageUrl', self.activeImageUrl);
    self.set('_indexToLoad', self.get('_index'))
    self.observe('_indexToLoad', function(newValue, oldValue, keypath) {
      var imageIndex = Math.abs(newValue) % self.get('images').length;
      var imageUrl = self.get('images.' + imageIndex);

      self.getAsync(imageUrl)
        .then(function() {
          self.set('_index', newValue);
          setTimeout(function() {
            self.position();
          }, 0)
        }).catch(function(e) {
					console.log('Error: ' + e);
				});
    });

    self.observe('images', function(newValue, oldValue, keypath) {
      setTimeout(function() {
        self.position();
      }, 0)
    })

    self.on({
      pause: self.stopSlideshow,
      start: self.startSlideshow,
      nextImage: self.nextImage,
      previousImage: self.previousImage
    })
  },
  startSlideshow: function() {
    var self = this;
    var interval = setInterval(function() {
      self.set('_indexToLoad', self.get('_index') + 1);
    }, 5000);
    self.set('activeInterval', interval);
    self.toggle('showPauseButton');
  },

  stopSlideshow: function() {
    var self = this;
    self.toggle('showPauseButton');
    clearInterval(self.get('activeInterval'));
  },

  previousImage: function() {
    var self = this;
    self.set('_indexToLoad', self.get('_index') - 1);
  },

  nextImage: function() {
    var self = this;
    self.set('_indexToLoad', self.get('_index') + 1);
  },

  onrender: function() {
    this.position();
  },

  onconstruct: function(options) {
    this.options = options;
  },

  computed: {
    index: function() {
      var self = this;
      return Math.abs(self.get('_index')) % self.get('images').length;
    }
  },
  onconfig: function() {
    var self = this;
    self.set('activeImageUrl', function() {
      return ""
    });
  },

  position: function() {
    var wrapper = this.find('.imageSlider_wrapper');
    var img = this.find('.imageSlider_wrapper>img');
    setTimeout(function() {
      fit(img, wrapper, {
        watch: true,
        apply: true
      });
    }, 0);

  },
  activeImageUrl: function() {
    var self = this;
    var idx = self.get('index');
    return self.get("images." + idx);
  },
  getAsync: function(url) {
    var self = this;
    NProgress.configure({ parent: self.get('parent') });
    NProgress.start();
    return new Promise(function(resolve, reject) {
      var img = new Image();

      img.onload = function() {
         NProgress.done();
	       resolve();
      }

      img.onerror = function() {
      	NProgress.done();
        reject();
      };
      img.setAttribute("src", url);
    })
  }
})

var firstImageSet = [
  'http://img15.deviantart.net/1ffe/i/2008/314/7/b/magic_forrest_by_jsunsstock.jpg',
  'https://c2.staticflickr.com/6/5347/9657510889_b2d928e3d0_b.jpg',
  'https://kevinraber.files.wordpress.com/2012/12/july-exhibit-redwood-2-00042-1-wcr.jpg',
  'http://img09.deviantart.net/f88c/i/2012/139/b/a/sunny_forrest_by_peenbuiker-d50b44a.jpg',
  'http://orig02.deviantart.net/3fec/f/2008/263/5/3/the_forrest_awakes_by_frederikm.jpg'
];

var secondImageSet = [
  'http://www.hiltonhawaiianvillage.com/assets/img/discover/oahu-island-activities/HHV_Oahu-island-activities_Content_Beaches_455x248_x2.jpg',
  'http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/beach-wallpaper-9.jpg',
  'http://i.livescience.com/images/i/000/054/836/i02/beach-sea-130716.jpg',
  'http://media-cdn.tripadvisor.com/media/photo-s/05/76/7f/0f/nai-harn-beach.jpg',
  'http://www.funchap.com/wp-content/uploads/2015/08/nice-caribbean-beach-wallpaper-2015.jpg'
];

var thirdImageSet = [
'http://i.telegraph.co.uk/multimedia/archive/02625/mountain1_2625884k.jpg',
'http://assets.worldwildlife.org/photos/2325/images/hero_small/mountains-hero.jpg?1345838509',
'http://images.nationalgeographic.com/wpf/media-live/photos/000/011/cache/mountains_1110_600x450.jpg',
'https://i.guim.co.uk/img/media/6168e08ab8168b409f4a078d0a396355f44d7ef8/0_204_5183_3111/master/5183.jpg?w=620&q=85&auto=format&sharp=10&s=2eb45c9be5a9c0180e052074a97d1923',
'http://i-cias.com/e.o/slides/taurus_m03.jpg',
]

new ImageSlider({
  el: '#slider1',
  template: '#sliderTemplate',
  data: {
    images: firstImageSet,
    parent: '#slider1'
  }
});

new ImageSlider({
  el: '#slider2',
  template: '#sliderTemplate',
  data: {
    images: secondImageSet,
    parent: '#slider2'
  }
});

new ImageSlider({
  el: '#slider3',
  template: '#sliderTemplate',
  data: {
    images: thirdImageSet,
    parent: '#slider3'
  }
});