clever fucking slider. REQUIREDS JQUERY IMAGESLOADED PLUGIN https://github.com/desandro/imagesloaded

demosource.json

{
  "images": [
    {
      "id": 45,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/1646-3-copy-2.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    },
    {
      "id": 50,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/OJISG-11-copy.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    },
    {
      "id": 49,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/OJISG-08.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    },
    {
      "id": 46,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/Ojai-bedside-copy.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    },
    {
      "id": 48,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/Ojai-gate-copy.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    },
    {
      "id": 47,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/Ojai-fireplace-copy.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    },
    {
      "id": 44,
      "source": "http:\/\/lacourchodos.com\/dev\/wp-content\/uploads\/2013\/02\/1646-1-copy-2.jpg",
      "caption": "Courtesy of Cheryl Rowley Design"
    }
  ]
}

slider.css

.mask {
  overflow: hidden;
}

#project-gallery {
  overflow: hidden;
  position: relative;
  left: 0;
}

.gallery-img {
  position: relative; 
  height: 100%; 
  float: left; 
  max-height: 734px;
  overflow: hidden;
}

.gallery-img img {
  float: left;
  max-width: 1200px;
  position: relative;
  display: block;
  z-index: 2;
}

slider.js

jQuery(document).ready(function() {
  homeGallery();
});

var container = jQuery("#project-gallery");
rawSource = jQuery("#gallery-source").html(); 
imgSource = jQuery.parseJSON(rawSource);
var totalImgs = imgSource.images.length;
var totalSlides = 0; 

function homeGallery(){
  createGallery();
  buildImgArrays();
  container.imagesLoaded(function($images){
    arrange($images);
    slideshow();
  });
}

function createGallery() {
  var ul = document.createElement("ul");
  jQuery("#project-gallery").append(ul);
}

function buildImgArrays () {
  var totalWidth = 0;
  
  for (var i = 0; i < totalImgs; i++) {
    var img = ("<img src='" + imgSource.images[i].source + "'/>");
    container.find("ul").append(img);
  }
  return totalImgs;
}

function arrange($images) {
  var totalWidth = 0;
  
  $images.each(function(){
    var natHeight = jQuery(this).height();
    var natWidth = jQuery(this).width();
    jQuery(this).wrap('<div class="gallery-img" />');
    if (natWidth/natHeight > 1) {
      jQuery(this).width("1200px");
      totalWidth += 1200;
      totalSlides += 2;
    } else {
      jQuery(this).width("595px").addClass("tall");
      totalWidth += 605;
      totalSlides += 1;
      if (jQuery(this).parent(".gallery-img").prev(".gallery-img").find("img").hasClass("tall")) {
        jQuery(this).css("margin-left", "10px");
      }
    }
  });
  return totalWidth;
  return totalSlides;
}

function switchArrows(currentSlide) {
  if ((currentSlide === 0) && (currentSlide !== totalSlides-1)) {
    jQuery(".slide-left").hide();
    jQuery(".slide-right").show();
  } else if ((currentSlide !== 0) && (currentSlide ===  totalSlides-1)) {
    jQuery(".slide-right").hide();
    jQuery(".slide-left").show();
  } else {
    jQuery(".slide-nav").show();
  }
}

function slideshow() {
  container.width(totalImgs * 1200 + "px");
  var currentSlide = 0;
  switchArrows(currentSlide);
  
  var imgs = container.find("img");
  jQuery(".slide-nav").on("click", function(e){
    console.log(totalSlides);
    console.log(currentSlide);
    e.preventDefault();
    var link = jQuery(this);
    var mask = jQuery("#cover");
    mask.fadeIn(function(){
      if (link.hasClass("slide-left")) {
        if (currentSlide === 0) {
          mask.fadeOut();
          switchArrows(currentSlide);
        } else {
          var offset = 1200;
          container.css("left", "+=" + offset + "px");
          mask.fadeOut();
          currentSlide-=2;
          switchArrows(currentSlide);
        }
      } else {
        if (currentSlide > totalSlides-3) {
          container.css("left", "0px");
          jQuery(".slide-left").show();
          mask.fadeOut();
          currentSlide = 0; 
          switchArrows(currentSlide);
        } else {
          jQuery(".slide-nav").show();
          var offset = 1200;
          container.css("left", "-=" + offset + "px");
          mask.fadeOut();
          currentSlide+=2;
          switchArrows(currentSlide);
        }
      }
    });
  });
}