simple stupid jquery carousel

carousel.css

#my-carousel-of-dreams { position: relative; width: 100%; max-width: 950px; overflow: hidden; }
ul.slidescroller { margin: 0; padding: 0 20px; position: relative; width: 9999px; }
ul.slidescroller > li { width: 280px; float: left; padding: 10px; margin: 5px; overflow: hidden; }
ul.slidescroller li { list-style: none; }
#my-carousel-of-dreams .next, #my-carousel-of-dreams .prev { /* positioning for arrows here */ }

carousel.html

<div id="my-carousel-of-dreams">
  
  <span class="previous">&larr;</span>
  <span class="next">&rarr;</span>
  
  <ul class="carousel">
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide</li>
  </ul>
</div>

carousel.js

$(function(){

  var visibleItems = 3;

	var $carousel = $("ul.carousel");
	var $slideItems = $("ul.carousel > li");
	var $firstItem;

	var setCurrentItems = function() {
		$slideItems.hide();
		$('.current').removeClass('current');
		$currentItems = $("ul.carousel > li:lt(" + visibleItems + ")");
		$currentItems.addClass('current').show();
	}

	var nextItem = function() {
		$firstItem = $("ul.carousel > li:first-child");
		$carousel.append($firstItem);
		setCurrentItems();
	}

	var previousItem = function() {
		$lastItem = $("ul.carousel > li:last-child");
		$carousel.prepend($lastItem);
		setCurrentItems();
	}

	$("ul.carousel").siblings(".next").click(nextItem);
	$("ul.carousel").siblings(".previous").click(previousItem);

	setCurrentItems();

});	

Thank you! But how can I make it so only the active slide is visible?