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' } });