$(document).ready(function(){
  $("#content-slider-01").slider({
    animate: true,
    change: handleSliderChange01,
    slide: handleSliderSlide01
  });
});

function handleSliderChange01(e, ui)
{
  var maxScroll = $("#content-scroll-01").attr("scrollWidth") - $("#content-scroll-01").width();
  $("#content-scroll-01").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide01(e, ui)
{
  var maxScroll = $("#content-scroll-01").attr("scrollWidth") - $("#content-scroll-01").width();
  $("#content-scroll-01").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

$(document).ready(function(){
  $("#content-slider-02").slider({
    animate: true,
    change: handleSliderChange02,
    slide: handleSliderSlide02
  });
});

function handleSliderChange02(e, ui)
{
  var maxScroll = $("#content-scroll-02").attr("scrollWidth") - $("#content-scroll-02").width();
  $("#content-scroll-02").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide02(e, ui)
{
  var maxScroll = $("#content-scroll-02").attr("scrollWidth") - $("#content-scroll-02").width();
  $("#content-scroll-02").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

$(document).ready(function(){
  $("#content-slider-03").slider({
    animate: true,
    change: handleSliderChange03,
    slide: handleSliderSlide03
  });
});

function handleSliderChange03(e, ui)
{
  var maxScroll = $("#content-scroll-03").attr("scrollWidth") - $("#content-scroll-03").width();
  $("#content-scroll-03").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide03(e, ui)
{
  var maxScroll = $("#content-scroll-03").attr("scrollWidth") - $("#content-scroll-03").width();
  $("#content-scroll-03").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

$(document).ready(function(){
  $("#content-slider-04").slider({
    animate: true,
    change: handleSliderChange04,
    slide: handleSliderSlide04
  });
});

function handleSliderChange04(e, ui)
{
  var maxScroll = $("#content-scroll-04").attr("scrollWidth") - $("#content-scroll-04").width();
  $("#content-scroll-04").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide04(e, ui)
{
  var maxScroll = $("#content-scroll-04").attr("scrollWidth") - $("#content-scroll-04").width();
  $("#content-scroll-04").attr({scrollLeft: ui.value * (maxScroll / 100) });
}