vadviktor/carousel.html

## carousel.html
<html>
  <head>
    <title></title>

    <style type="text/css">
      <!--

      div#carousel_outer_container {
        width: 100%;
        margin: 0px;
        padding: 0px;
      }

      div#carousel_container {
        display: block;
        overflow: hidden;
        position: relative;
        float: left;
        margin: 0px;
        padding: 0px;
      }

      div#carousel_container ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        position: relative;
      }

      div#carousel_container ul li {
        display: inline;
      }

      div.item {
        width: 159px;
        height: 67px;
        float: left;
        display: block;
        padding: 0px;
        margin: 0px 5px 0px 5px;
      }

      div.item.hover {
        background-position: -159px 0;
      }
      div.item.selected {
        background-position: -318px 0;
      }

      div.first {
        background-image: url(firstVariant.png);
      }
      div.second {
        background-image: url(secondVariant.png);
      }
      div.third {
        background-image: url(thirdVariant.png);
      }
      div.forth {
        background-image: url(forthVariant.png);
      }

      div.btnprev {
        background: transparent;
        background-image: url('arrow_back_status.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        display: block;
        float: left;
        width: 28px;
        height: 28px;
      }

      div.btnprev:hover {
        background-position: -28px 0;
      }

      div.btnprev:active {
        background-position: -56px 0;
      }

      div.btnprev .disabled,
      div.btnprev .disabled:hover,
      div.btnprev .disabled:active
      {
        cursor: default;
        background-position: -84px 0;
      }

      div.btnnext {
        background: transparent;
        background-image: url('arrow_next_status.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        display: block;
        float: left;
        width: 28px;
        height: 28px;
      }

      div.btnnext:hover {
        background-position: -28px 0;
      }

      div.btnnext:active {
        background-position: -56px 0;
      }

      div.btnnext .disabled,
      div.btnnext .disabled:hover,
      div.btnnext .disabled:active {
        cursor: default;
        background-position: -84px 0;
      }

      -->
    </style>

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="jquery.timed-event-min.js" type="text/javascript"></script>

  </head>

  <body>

    <script type="text/javascript">
      $(document).ready(function()
      {
        var step = 1; //How many LI you want to scroll on click of left and right button.
        var current = 0; //Index or Number of left most visible LI in carousel.
        var maximum = $('#carousel_container ul li').size(); //Total number of LI in carousel.
        var speed = 200; //Animation speed.

        var liSize = $('div.item').width() + 10; //Width of one LI in pixels plus the margin
        var carousel_height = $('div.item').height(); //Carousel DIV height.
        var button_top_margin = Math.round( (carousel_height / 2) - 14 );
        var buttons_width = 2 * $('.btnprev').width();

        var outer_container = $('div#carousel_outer_container');

        outer_container.css('min-width', (liSize + buttons_width) +'px');

        var visible = 0; //Number of visible LI s.

        var ulSize = liSize * maximum; //Width of UL.
        var divSize = liSize * visible; //Width of Carousel DIV.

        var getOuterContainerWidth = function()
        {
           outer_container.width() - 10;
        };

        var showHideButtons = function()
        {
          //debug
//          console.group('showHideButtons');
//          console.info('current', current)
//          console.info('visible', visible)
//          console.groupEnd();

          if( current - 1 >= 0 )
          {
            $('.btnprev').css('visibility', 'visible');
          }else{
            $('.btnprev').css('visibility', 'hidden');
          }

          if ( current + 1 + ( visible - 1 ) < maximum )
          {
            $('.btnnext').css('visibility', 'visible');
          }else{
            $('.btnnext').css('visibility', 'hidden');
          }

          if ( visible == maximum && current == 0 )
          {
            $('.btnprev').css('visibility', 'hidden');
            $('.btnnext').css('visibility', 'hidden');
          }
        }

        var reCalcWidthValues = function(container_width)
        {
          visible = Math.floor( (container_width - buttons_width) / liSize );

          // at least 1 element has to be visible
          if ( visible <= 0 )
          {
            visible = 1;
          }

          //if more elements are to be shown then the maximum, maintain max width
          if ( maximum < visible )
          {
            visible = maximum;
          }

          divSize = visible * liSize;

          $('div#carousel_container')
          .css('width', divSize + "px" );

          //correct item paging
          var prev_count = current - (maximum - visible);
          if ( prev_count < 0 ) prev_count = 0;

          for ( var i = 0; i < prev_count; i++ )
          {
            $('.btnprev').click();
          }

          showHideButtons();
        };

        $(window).timedBind('resize', {buffer: 300}, function()
        {
          reCalcWidthValues(getOuterContainerWidth());
        });

        reCalcWidthValues(getOuterContainerWidth());

        $('.btnprev')
        .css('margin-top', button_top_margin +"px");

        $('.btnnext')
        .css('margin-top', button_top_margin +"px");

        $('#carousel_container ul')
        .css("width", ulSize+"px")
        .css("left", -(current * liSize));

        $('.item').not('[class~="selected"]').hover(
        function()
        {
          $(this).addClass('hover');
        },
        function()
        {
          $(this).removeClass('hover');
        }
      );

        $('.item').click(function()
        {
          $('div.item[class~="selected"]').each(
          function()
          {
            $(this).removeClass("selected");
          }
        );

          $(this).addClass("selected");
        });

        $('.btnprev').click(function()
        {
          if(current - step < 0 || current - step > maximum - visible)
          {
            return;
          }
          else
          {
            current = current - step;
            $('#carousel_container ul')
            .animate({left: -(liSize * current)}, speed, null);
          }
          showHideButtons();
          return false;
        });

        $('.btnnext').click(function()
        {
          if(current + step < 0 || current + step > maximum - visible)
          {
            return;
          }
          else
          {
            current = current + step;
            $('#carousel_container ul')
            .animate({left: -(liSize * current)}, speed, null);
          }
          showHideButtons();
          return false;
        });

      });
    </script>

    <div id="carousel_outer_container">
      <div class="btnprev"></div>
      <div id="carousel_container">
        <ul>
          <li>
            <div class="item first"></div>
          </li>
          <li>
            <div class="item second"></div>
          </li>
          <li>
            <div class="item third"></div>
          </li>
          <li>
            <div class="item forth"></div>
          </li>
        </ul>
      </div>
      <div class="btnnext"></div>
    </div>

  </body>
</html>
	<html>
	<head>
	<title></title>

	<style type="text/css">
	<!--

	div#carousel_outer_container {
	width: 100%;
	margin: 0px;
	padding: 0px;
	}

	div#carousel_container {
	display: block;
	overflow: hidden;
	position: relative;
	float: left;
	margin: 0px;
	padding: 0px;
	}

	div#carousel_container ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	}

	div#carousel_container ul li {
	display: inline;
	}

	div.item {
	width: 159px;
	height: 67px;
	float: left;
	display: block;
	padding: 0px;
	margin: 0px 5px 0px 5px;
	}

	div.item.hover {
	background-position: -159px 0;
	}
	div.item.selected {
	background-position: -318px 0;
	}

	div.first {
	background-image: url(firstVariant.png);
	}
	div.second {
	background-image: url(secondVariant.png);
	}
	div.third {
	background-image: url(thirdVariant.png);
	}
	div.forth {
	background-image: url(forthVariant.png);
	}

	div.btnprev {
	background: transparent;
	background-image: url('arrow_back_status.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	float: left;
	width: 28px;
	height: 28px;
	}

	div.btnprev:hover {
	background-position: -28px 0;
	}

	div.btnprev:active {
	background-position: -56px 0;
	}

	div.btnprev .disabled,
	div.btnprev .disabled:hover,
	div.btnprev .disabled:active
	{
	cursor: default;
	background-position: -84px 0;
	}

	div.btnnext {
	background: transparent;
	background-image: url('arrow_next_status.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	display: block;
	float: left;
	width: 28px;
	height: 28px;
	}

	div.btnnext:hover {
	background-position: -28px 0;
	}

	div.btnnext:active {
	background-position: -56px 0;
	}

	div.btnnext .disabled,
	div.btnnext .disabled:hover,
	div.btnnext .disabled:active {
	cursor: default;
	background-position: -84px 0;
	}

	-->
	</style>

	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script src="jquery.timed-event-min.js" type="text/javascript"></script>

	</head>

	<body>

	<script type="text/javascript">
	$(document).ready(function()
	{
	var step = 1; //How many LI you want to scroll on click of left and right button.
	var current = 0; //Index or Number of left most visible LI in carousel.
	var maximum = $('#carousel_container ul li').size(); //Total number of LI in carousel.
	var speed = 200; //Animation speed.

	var liSize = $('div.item').width() + 10; //Width of one LI in pixels plus the margin
	var carousel_height = $('div.item').height(); //Carousel DIV height.
	var button_top_margin = Math.round( (carousel_height / 2) - 14 );
	var buttons_width = 2 * $('.btnprev').width();

	var outer_container = $('div#carousel_outer_container');

	outer_container.css('min-width', (liSize + buttons_width) +'px');

	var visible = 0; //Number of visible LI s.

	var ulSize = liSize * maximum; //Width of UL.
	var divSize = liSize * visible; //Width of Carousel DIV.

	var getOuterContainerWidth = function()
	{
	outer_container.width() - 10;
	};

	var showHideButtons = function()
	{
	//debug
	// console.group('showHideButtons');
	// console.info('current', current)
	// console.info('visible', visible)
	// console.groupEnd();

	if( current - 1 >= 0 )
	{
	$('.btnprev').css('visibility', 'visible');
	}else{
	$('.btnprev').css('visibility', 'hidden');
	}

	if ( current + 1 + ( visible - 1 ) < maximum )
	{
	$('.btnnext').css('visibility', 'visible');
	}else{
	$('.btnnext').css('visibility', 'hidden');
	}

	if ( visible == maximum && current == 0 )
	{
	$('.btnprev').css('visibility', 'hidden');
	$('.btnnext').css('visibility', 'hidden');
	}
	}

	var reCalcWidthValues = function(container_width)
	{
	visible = Math.floor( (container_width - buttons_width) / liSize );

	// at least 1 element has to be visible
	if ( visible <= 0 )
	{
	visible = 1;
	}

	//if more elements are to be shown then the maximum, maintain max width
	if ( maximum < visible )
	{
	visible = maximum;
	}

	divSize = visible * liSize;

	$('div#carousel_container')
	.css('width', divSize + "px" );

	//correct item paging
	var prev_count = current - (maximum - visible);
	if ( prev_count < 0 ) prev_count = 0;

	for ( var i = 0; i < prev_count; i++ )
	{
	$('.btnprev').click();
	}

	showHideButtons();
	};

	$(window).timedBind('resize', {buffer: 300}, function()
	{
	reCalcWidthValues(getOuterContainerWidth());
	});

	reCalcWidthValues(getOuterContainerWidth());

	$('.btnprev')
	.css('margin-top', button_top_margin +"px");

	$('.btnnext')
	.css('margin-top', button_top_margin +"px");

	$('#carousel_container ul')
	.css("width", ulSize+"px")
	.css("left", -(current * liSize));

	$('.item').not('[class~="selected"]').hover(
	function()
	{
	$(this).addClass('hover');
	},
	function()
	{
	$(this).removeClass('hover');
	}
	);

	$('.item').click(function()
	{
	$('div.item[class~="selected"]').each(
	function()
	{
	$(this).removeClass("selected");
	}
	);

	$(this).addClass("selected");
	});

	$('.btnprev').click(function()
	{
	if(current - step < 0 \|\| current - step > maximum - visible)
	{
	return;
	}
	else
	{
	current = current - step;
	$('#carousel_container ul')
	.animate({left: -(liSize * current)}, speed, null);
	}
	showHideButtons();
	return false;
	});

	$('.btnnext').click(function()
	{
	if(current + step < 0 \|\| current + step > maximum - visible)
	{
	return;
	}
	else
	{
	current = current + step;
	$('#carousel_container ul')
	.animate({left: -(liSize * current)}, speed, null);
	}
	showHideButtons();
	return false;
	});

	});
	</script>

	<div id="carousel_outer_container">
	<div class="btnprev"></div>
	<div id="carousel_container">
	<ul>
	<li>
	<div class="item first"></div>
	</li>
	<li>
	<div class="item second"></div>
	</li>
	<li>
	<div class="item third"></div>
	</li>
	<li>
	<div class="item forth"></div>
	</li>
	</ul>
	</div>
	<div class="btnnext"></div>
	</div>

	</body>
	</html>