<div id='slideShow'></div>
.active img {
  border: 1px solid black;
}

.slide img {
  height: 50px;
}

.mainImage img {
  height: 150px;
}
var slideModelFactory = function(text, active) {
  // id is not observable
  var slide = {
    id: _.uniqueId('slide_')
  };
  return mobx.extendObservable(slide, {
    // observable fields
    active: active || false,
    imageText: text,
    // computed
    get imageMain() {
      return 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + slide.imageText + '&w=350&h=150';
    },
    get imageThumb() {
      return 'https://placeholdit.imgix.net/~text?txtsize=22&txt=' + slide.imageText + '&w=400&h=50';
    }
  });
};

var slideShowModelFactory = function(slides) {
  return mobx.observable({
    // observable
    slides: _.map(slides, function(slide) {
      return slideModelFactory(slide.text, slide.active);
    }),
    // computed
    get activeSlide() {
      return _.find(this.slides, {
        'active': true
      });
    },
    // action
    setActiveSlide: mobx.action('set active slide', function(slideId) {
      // deactivate the current slide 
      this.activeSlide.active = false;
      // set the next slide as active
      _.find(this.slides, {id: slideId}).active = true;
    })
  });
};

var slideShowModel = slideShowModelFactory([{
  text: 'Heloo!',
  active: true
}, {
  text: 'Cool!'
}, {
  text: 'MobX!'
}]);

var $slideShowContainer = $('#slideShow');

// add event handling
$slideShowContainer.on('click', '.slide', function() {
  slideShowModel.setActiveSlide($(this).data('slideId'));
});

mobx.autorun(function() {
  var html = '<div class="mainImage"><img src="' + slideShowModel.activeSlide.imageMain + '"/></div>';
  html += '<div id="slides">';
  _.forEach(slideShowModel.slides, function(slide) {
    html += '<div class="slide ' + (slide.active ? ' active' : '') + '" data-slide-id="' + slide.id + '">';
    html += '<img src="' + slide.imageThumb + '"/>';
    html += '</div>';
  });
  html += '</div>';
  $slideShowContainer.html(html);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js
  3. https://npmcdn.com/mobx@2.5.1/lib/mobx.umd.min.js