jQuery.slickSlider.js files including markup and styles

jQuery.slickSlider.js

$.fn.initSlickSlider = function(options){
  var goToMargin;

  // #TODO modulate slide function for fade only!

  // set default options
  var settings = jQuery.extend({
    transitionDuration: 300, fade: true
  }, options);

  // $(this) should be a group of li's
  var menu = $(this);

  // set the #slides-window's height to the first .slide's height
  $(this).closest('div').find('#slides').animate({height: $(this).closest('div').find('#1').height()}, 800);

  // fade content-area away and new one in
  $(menu).live('click', function(event) {

    // get the parent div incase there are multiple tabbed sliders on one page
    var parent = $(this).closest('div');

    // get the ID of the current slide
    var currentId = parseInt($(this).siblings('.active').data('index'));

    // get the ID of the div that will be positioned in view
    var newId = parseInt($(this).data('index'));

    // get the div currently in view
    var currentSlide = $(parent).find('#' + currentId);

    // get the #slides div
    var slides = $(parent).find('#slides');

    //  get the current slide
    var newSlide = $(slides).find('#' + (newId));

    var height = $(this).data('height');
    height = height === undefined ? $(newSlide).height() : height;

    $(slides).children().stop().css('opacity', 1);

    var range;
    var time;

    if(settings.fade === true) {
      if(currentId > newId) {
        range = currentId - newId;
        time = (settings.transitionDuration / range) * 0.8;
        for(var i = currentId; i > newId; i--) {
          $('#' + i).delay(time * (range - (i - newId))).animate({opacity:0}, time, 'linear');
        }
      } else {
        range = newId - currentId;
        time = (settings.transitionDuration / range) * 0.8;
        for(var i = currentId; i < newId; i++) {
          $('#' + i).delay(time * (range - (newId - i))).animate({opacity:0}, time, 'linear');
        }
      }
    }

    goToMargin = -((newId - 1) * 120);

    // slide the #slides div to the correct posisiton and change the height
    $(slides).stop().animate({height: height, marginLeft: goToMargin + '%'}, settings.transitionDuration, 'linear', function(){
      $(slides).children().css('opacity', 1);
    });

    // deactivate the current slide
    $(currentSlide).removeClass('active');

    // activate the new slide
    $(newSlide).addClass('active');

    // set the menu button to active
    $(this).addClass('active').siblings().removeClass('active');
  });
};

$(window).load(function(){
  $('#menu li').initSlickSlider({transitionDuration: 800});
});

slick_slider.css

#slides-window {
  overflow: hidden;
  padding: 20px;
}

#slides {
  width: 10000%;
  overflow: hidden;
  height: 0;
}

.slide {
  width: 1%;
  float: left;
  margin-right: 0.2%;
}

slick_slider.html

<div id="slick-slider">
  <ul id="menu">
    <li data-index="1" class="active">
      Item 1
    </li>

    <li data-index="2">
      Item 2
    </li>

    <li data-index="3">
      Item 3
    </li>

    <li data-index="4">
      Item 4
    </li>
  </ul>

  <div id="slides-window">
    <div id="slides">
      <div class="slide" id="1">
        <h3>Slide 1</h3>
        <p>Some Content Would Go In Here</p>
      </div>
      <div class="slide" id="2">
        <h3>Slide 2</h3>
        <p>Some Content Would Go In Here</p>
      </div>

      <div class="slide" id="3">
        <h3>Slide 3</h3>
        <p>Some Content Would Go In Here</p>
      </div>

      <div class="slide" id="4">
        <h3>Slide 4</h3>
        <p>Some Content Would Go In Here</p>
      </div>
    </div>
  </div>
</div>