The main function of this was to provide interactivity to two rotators, on a responsive media page, for a rails project I was part of.

media.js

jQuery('document').ready(function($) {
  var $imageItem    = $('#image_gallery .rotator_item')
    , $videoItem    = $('#video_gallery .rotator_item')
    ;
 
  // resize images to fix thumbnail
  $("#image_gallery .rotator_item img").each(function() {
    var $image = $(this);
 
    $image.on("load", function(){
      var maxWidth    = $image.parent().width()
        , maxHeight   = $image.parent().height()
        , width       = $image.width()
        , height      = $image.height()
        ;
 
      if ( (width / height) < (maxWidth / maxHeight) ) {
         $image.css("width", maxWidth);
         $image.css("height", "auto");
       } else {
         $image.css("height", maxHeight);
         $image.css("width", "auto");
       }
    });
  });
 
 
  var displayArrows = function() {
    $(".rotator_container").each (function(){
      // calculate the areas then divide to determine the total number of columns
      var $this              = $(this)
        , $columnHolder      = $this.find(".items_holder")
        , columnWidth        = $this.width()
        , columnHeight       = $columnHolder.height()
        , columnArea         = columnWidth * columnHeight
        , $item              = $this.find('.rotator_item')
        // must be bordeLeftWidth NOT borderWidth for frekin' ie9
        , borderWidth        = parseInt($item.css("borderLeftWidth").replace('px', '')) * 2
        , itemWidth          = $item.width() + parseInt($item.css("marginLeft").replace('px', '')) + parseInt($item.css("marginRight").replace('px', '')) + borderWidth
        , itemHeight         = $item.height() + parseInt($item.css("marginBottom").replace('px', '')) + borderWidth
        , itemArea           = (itemWidth * $item.length) * itemHeight
        , $myArrows          = $this.find('.arrow')
        , columnNum          = Math.ceil(itemArea / columnArea)
        , columnHolderWidth  = columnNum * columnWidth
        , $breadcrumbs       = $('.rotator_bread_crumbs')
        ;
 
      // set the width of the items holder
      $columnHolder.width(columnHolderWidth);
      $columnHolder.height($this.height());
 
      // show the arrows only when needed
      if (columnNum > 1) {
        $myArrows.show();
      } else {
        $myArrows.hide();
      }
 
      if (columnHeight > itemHeight) {
        $breadcrumbs.show();
      } else {
        $breadcrumbs.hide();
      }
      // create crumbs
      if ( $this.find($breadcrumbs).length ) {
        $breadcrumbs.empty();
        var colEnd = columnNum - 1;
        if (columnNum > 1) {
          $breadcrumbs.append('<li class="jsAnimate jsCrumbs" data-direction="0"><<</li><li class="jsAnimate jsArrow" data-direction="1"><</li>');
          for(var i = 0; i < columnNum; i++) {
            n = i+1;
            $breadcrumbs.append('<li class="set jsAnimate jsCrumbs" data-direction="-' + i + '">' + n + '</li>');
          }
          $breadcrumbs.append('<li class="jsAnimate jsArrow" data-direction="-1">></li><li class="jsAnimate jsCrumbs" data-direction="-' + colEnd + '">>></li>');
        }
      }
    });
  }
 
  // set the first breacrumb as the active default
  $('.rotator_bread_crumbs').find('.set:nth-child(1)').addClass('active');
  $videoItem.first().addClass('active');
 
  // debounce from underscore.js
  var debounce = function(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      }, wait);
      if (immediate && !timeout) func.apply(context, args);
    };
  };
  var efficientChecks = debounce(displayArrows, 250, false);
 
  // run on load
  displayArrows();
 
  // run on resize
  window.addEventListener('resize', efficientChecks);
 
  // animate the rotator
  $(document).on("click", ".jsAnimate", function() {
    var $this             = $(this)
      , $wrapper          = $this.parents('.rotator_container').find('.rotator_wrapper')
      , wrapperWidth      = $wrapper.width()
      , $itemsHolder      = $wrapper.find('.items_holder')
      , rotatorPosition   = $itemsHolder.position().left
      , direction         = $this.attr('data-direction')
      , itemsHolderWidth  = $itemsHolder.width()
      , index             = $this.attr('data-target')
      , maxScroll         = (itemsHolderWidth - wrapperWidth) * -1
      , scrollAmount
      ;
 
    // determine direction distance and permission
    if ( $this.hasClass('jsCrumbs') ) {
      scrollAmount = wrapperWidth * direction
    } else if ( $this.hasClass('jsArrow') && direction == 1 && rotatorPosition >= 0 ) {
      return false
    } else if ( $this.hasClass('jsArrow') && direction == -1 && rotatorPosition <= maxScroll ) {
      return false
    } else {
      scrollAmount = rotatorPosition + (wrapperWidth * direction)
    }
 
    // prevent click durring slide
    if ($itemsHolder.is(':animated')) {
      return false
    }
    $itemsHolder.clearQueue().animate({
      left: scrollAmount
    }, 750);
  });
 
  // colorbox for image popups
  $imageItem.colorbox({
    maxWidth: "95%",
    maxHeight: "95%",
    scalePhotos: true,
    rel:'group1',
    onClosed: function () {
      $("#cboxClose").removeClass('media-close-btn');
    },
    onComplete: function() {
      $.colorbox.resize({ width: $('.cboxPhoto').width() });
      $("#cboxClose").addClass("media-close-btn");
    }
  });
 
  // Switch video and content
  $videoItem.click( function(e) {
    var $this           = $(this),
      video_title       = $this.find('span').text(),
      video_description = $this.find('.hidden').text(),
      itemID            = this.id.replace('vid-', '');
 
    e.preventDefault();
 
    $this.siblings().removeClass('active');
    $this.addClass('active');
    $("#video_gallery .video_container").html('<iframe src="https://www.youtube.com/embed/' + itemID + '?rel=0&amp;wmode=opaque" frameborder="0" width="560" height="315" wmode="opaque" allowfullscreen></iframe>');
    $("#video_gallery .video_description h2").html( video_title );
    $("#video_gallery .video_description p").html( video_description );
  });
});

video.slim.html

.container
  .video
    - if @video_gallery.nil? || @video_gallery.empty?
      .video_container
        <iframe width="560" height="315" src="https://www.youtube.com/embed/khjv-9zW2J8?rel=0&wmode=opaque&autohide=1" frameborder="0" allowfullscreen></iframe>
      .video_description
        h2 Fortress Siege Action!
        P This Game puts you into the thick of competitive siege warfare. Unleash your minions and charge into the heart of the enemies’ stronghold, and build your own impenetrable gauntlet.
    - else
      .video_container
        <iframe width="560" height="315" src="https://www.youtube.com/embed/#{@video_gallery.first[:youtube_id]}?rel=0&wmode=opaque&autohide=1" frameborder="0" allowfullscreen></iframe>
      .video_description
        h2
          = @video_gallery.first[:title]
        P
          = @video_gallery.first[:description]
 
- unless @video_gallery.nil? || @video_gallery.empty?
  .clear.center.media_rotator
    .container
      .rotator_container
        .arrow.prev-arrow.jsAnimate.jsArrow data-direction="1"
        .arrow.next-arrow.jsAnimate.jsArrow data-direction="-1"
 
        .rotator_wrapper
          .items_holder
            - @video_gallery.each do |video|
              a.rotator_item href="#video_gallery" id="vid-#{video[:youtube_id]}"
                img src="https://img.youtube.com/vi/#{video[:youtube_id]}/0.jpg"
                span
                  = video[:title]
                .hidden
                  = video[:description]