Simple carousel logic

carousel.js

var appScreens = {
  // Internal control of the last setTimeout called
  _timeout: null,

  // Transition time in milliseconds
  transition: 3000,

  shift: function(next, autorun) {
    if (!$(next).hasClass('active')) {
      // Shift the img classes
      $('.feature-list img.active').removeClass('active');
      $(next).addClass('active');

      var screen = next.getAttribute('screen');
      $('.feature-list-screen:not(.active)').attr('src', screen);
      $('.feature-list-screen').toggleClass('active');
    }

    // Remove the last next callback
    clearTimeout(appScreens._timeout);

    if (autorun) {
      appScreens._timeout = setTimeout(function() {
        // Set the next sibling to be displayed
        var sibling = next.nextElementSibling || $('.feature-list img:first-child')[0];
        appScreens.shift(sibling, true);
      }, appScreens.transition);
    }
  },
};

appScreens.shift($('.feature-list img.active')[0], true);

$('.feature-list img').on('mouseover', function(event) {
  appScreens.shift(event.currentTarget);
});

$('.feature-list img').on('mouseout', function(event) {
  appScreens.shift(event.currentTarget, true);
});