DesignsCross/Infinite Slider test Secret

## Infinite Slider test
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Infinite Carousel Test</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function() {

        //options( 1 - ON , 0 - OFF)
        var auto_slide = 0;
            var hover_pause = 1;
        var key_slide = 1;

        //speed of auto slide(
        var auto_slide_seconds = 5000;
        /* IMPORTANT: i know the variable is called ...seconds but it's
        in milliseconds ( multiplied with 1000) '*/

        /*move he last list item before the first item. The purpose of this is
        if the user clicks to slide left he will be able to see the last item.*/
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));

        //check if auto sliding is enabled
        if(auto_slide == 1){
            /*set the interval (loop) to call function slide with option 'right'
            and set the interval time to the variable we declared previously */
            var timer = setInterval('slide("right")', auto_slide_seconds);

            /*and change the value of our hidden field that hold info about
            the interval, setting it to the number of milliseconds we declared previously*/
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }

        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list
            $('#carousel_ul').hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(){
                //and when mouseout start it again
                timer = setInterval('slide("right")', auto_slide_seconds);
            });

        }

        //check if key sliding is enabled
        if(key_slide == 1){

            //binding keypress function
            $(document).bind('keypress', function(e) {
                //keyCode for left arrow is 37 and for right it's 39 '
                if(e.keyCode==37){
                        //initialize the slide to left function
                        slide('left');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide('right');
                }
            });

        }


  });

//FUNCTIONS BELLOW

//slide function
function slide(where){

            //get the item width
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            /* using a if statement and the where variable check
            we will check where the user wants to slide (left or right)*/
            if(where == 'left'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            }


            //make the sliding effect using jQuery's animate function... '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){

                /* when the animation finishes use the if statement again, and make an ilussion
                of infinity by changing place of last or first item*/
                if(where == 'left'){
                    //...and if it slided to left we put the last item before the first item
                    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#carousel_ul li:last').after($('#carousel_ul li:first'));
                }

                //...and then just get back the default left indent
                $('#carousel_ul').css({'left' : '-210px'});
            });


}

</script>
<style type="text/css">

#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}

#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:200px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
}
#right_scroll{
margin:0px auto;
height:50px;
width:100px;
position: relative;
top:150px;
right: 370px;
background: #C0C0C0;
}
</style>
</head>
<body>
  <div id='carousel_container'>
      <div id='carousel_inner'>
        <ul id='carousel_ul'>
            <li><a href='#'><img src='item1.png' /></a></li>
            <li><a href='#'><img src='item2.png' /></a></li>
            <li><a href='#'><img src='item3.png' /></a></li>
            <li><a href='#'><img src='item4.png' /></a></li>
            <li><a href='#'><img src='item5.png' /></a></li>
        </ul>
    </div>
    </div>
  <button id='right_scroll'><a href='javascript:slide("right");'>Random</a>
  <input type='hidden' id='hidden_auto_slide_seconds' value=0 />
  </button>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<html>
	<head>
	<title>Infinite Carousel Test</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {

	//options( 1 - ON , 0 - OFF)
	var auto_slide = 0;
	var hover_pause = 1;
	var key_slide = 1;

	//speed of auto slide(
	var auto_slide_seconds = 5000;
	/* IMPORTANT: i know the variable is called ...seconds but it's
	in milliseconds ( multiplied with 1000) '*/

	/*move he last list item before the first item. The purpose of this is
	if the user clicks to slide left he will be able to see the last item.*/
	$('#carousel_ul li:first').before($('#carousel_ul li:last'));

	//check if auto sliding is enabled
	if(auto_slide == 1){
	/*set the interval (loop) to call function slide with option 'right'
	and set the interval time to the variable we declared previously */
	var timer = setInterval('slide("right")', auto_slide_seconds);

	/*and change the value of our hidden field that hold info about
	the interval, setting it to the number of milliseconds we declared previously*/
	$('#hidden_auto_slide_seconds').val(auto_slide_seconds);
	}

	//check if hover pause is enabled
	if(hover_pause == 1){
	//when hovered over the list
	$('#carousel_ul').hover(function(){
	//stop the interval
	clearInterval(timer)
	},function(){
	//and when mouseout start it again
	timer = setInterval('slide("right")', auto_slide_seconds);
	});

	}

	//check if key sliding is enabled
	if(key_slide == 1){

	//binding keypress function
	$(document).bind('keypress', function(e) {
	//keyCode for left arrow is 37 and for right it's 39 '
	if(e.keyCode==37){
	//initialize the slide to left function
	slide('left');
	}else if(e.keyCode==39){
	//initialize the slide to right function
	slide('right');
	}
	});

	}


	});

	//FUNCTIONS BELLOW

	//slide function
	function slide(where){

	//get the item width
	var item_width = $('#carousel_ul li').outerWidth() + 10;

	/* using a if statement and the where variable check
	we will check where the user wants to slide (left or right)*/
	if(where == 'left'){
	//...calculating the new left indent of the unordered list (ul) for left sliding
	var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
	}else{
	//...calculating the new left indent of the unordered list (ul) for right sliding
	var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

	}


	//make the sliding effect using jQuery's animate function... '
	$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){

	/* when the animation finishes use the if statement again, and make an ilussion
	of infinity by changing place of last or first item*/
	if(where == 'left'){
	//...and if it slided to left we put the last item before the first item
	$('#carousel_ul li:first').before($('#carousel_ul li:last'));
	}else{
	//...and if it slided to right we put the first item after the last item
	$('#carousel_ul li:last').after($('#carousel_ul li:first'));
	}

	//...and then just get back the default left indent
	$('#carousel_ul').css({'left' : '-210px'});
	});





	}

	</script>
	<style type="text/css">

	#carousel_inner {
	float:left; /* important for inline positioning */
	width:630px; /* important (this width = width of list item(including margin) * items shown */
	overflow: hidden; /* important (hide the items outside the div) */
	/* non-important styling bellow */
	background: #F0F0F0;
	}

	#carousel_ul {
	position:relative;
	left:-210px; /* important (this should be negative number of list items width(including margin) */
	list-style-type: none; /* removing the default styling for unordered list items */
	margin: 0px;
	padding: 0px;
	width:9999px; /* important */
	/* non-important styling bellow */
	padding-bottom:10px;
	}

	#carousel_ul li{
	float: left; /* important for inline positioning of the list items */
	width:200px; /* fixed width, important */
	/* just styling bellow*/
	padding:0px;
	height:110px;
	background: #000000;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:5px;
	margin-right:5px;
	}

	#carousel_ul li img {
	.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
	/* styling */
	cursor:pointer;
	cursor: hand;
	border:0px;
	}
	#right_scroll{
	margin:0px auto;
	height:50px;
	width:100px;
	position: relative;
	top:150px;
	right: 370px;
	background: #C0C0C0;
	}
	</style>
	</head>
	<body>
	<div id='carousel_container'>
	<div id='carousel_inner'>
	<ul id='carousel_ul'>
	<li><a href='#'><img src='item1.png' /></a></li>
	<li><a href='#'><img src='item2.png' /></a></li>
	<li><a href='#'><img src='item3.png' /></a></li>
	<li><a href='#'><img src='item4.png' /></a></li>
	<li><a href='#'><img src='item5.png' /></a></li>
	</ul>
	</div>
	</div>
	<button id='right_scroll'><a href='javascript:slide("right");'>Random</a>
	<input type='hidden' id='hidden_auto_slide_seconds' value=0 />
	</button>
	</body>
	</html>