I don’t know about you but I absolutely love jQuery plugins. They have came in handy on countless amount of projects, but there are occasions when they don’t quite do what you’d like.  For this example I am going to modify jQuery Cycle and make it act as an infinite carousel on a list of items. Lets get our hands dirty and begin .

VIEW FULL DEMO AND CODE

The HTML

The html strucutre is very simple. You have a main container div with an id of featuredProducts. You have a div with a class of wrapper followed by the ul with a class of productfeaturelist. The rest are just li items as many as you’d like.

   <div id="featuredProducts">
       <div class="wrapper">
          <ul class="productfeaturelist'">
		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 1</a>

    		<span class="price">Price</span>
   	 		<span class="priceInfo">$800.00</span>
    		</li>
    		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 2</a>
    		<span class="price">Price</span>

   	 	<span class="priceInfo">$800.00</span>
    		</li>
    		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 3</a>
    		<span class="price">Price</span>
   	 	<span class="priceInfo">$800.00</span>

    		</li>
    		<li class="productItem">
    		<a   href="#"><img src="images/insideProductsample.jpg" alt="Sample 5" border="0" /></a>
    		<a href="/testcat1/sample-5">Sample 4</a>
    		<span class="price">Price</span>
   	 	<span class="priceInfo">$800.00</span>
    		</li>

		</ul>
	</div>
</div>

The CSS

The css again is pretty simple, I’m only applying the css that matters the most to the elements. You can view the full css file in the demo.

The featureProducts div has a set width and a few more properties the most important is the position being set to relative. From there the wrapper div again has properties the most important of these being the overflow: hidden hiding the extra unordered lists outside of the wrapper area. I float the unordered list left and set a fixed width on it. This will make each element stack up beside each other. And last but not least don’t forget to float the list items and set a width on these to ensure the actual list items will work and look properly.

#featuredProducts {
	width: 689px;
	margin: 0 auto;
	height: 200px;
	position: relative;
}
#featuredProducts .wrapper {
	width: 649px;
	margin: 0 20px;
	overflow: hidden;
	height: 200px;
	position: relative;
}
#featuredProducts ul {
	width: 649px;
	float: left;
	height: 200px;
	margin: 0;
	padding: 0 0 0 0px;
	list-style: none;
}
#featuredProducts ul ul {
	margin: 0;
	padding: 0;
}
#featuredProducts ul li,
#featuredProducts ul li.productItem {
	float: left;
	width: 120px;
	padding: 16px 17px;
	height: 200px;
	position: relative;
}
#featuredProducts #archivePrev{
	width: 30px;
	height: 30px;
	background: url(images/prevbtn.gif) no-repeat top center;
	position: absolute;
	top: 50px;
	left: 0px;
	cursor: pointer;
	display: block;
	text-indent: -9999px;
}
#featuredProducts a#archiveNext {
	width: 22px;
	height: 22px;
	background: url(images/nextbtn.gif) no-repeat top right;
	position: absolute;
	top: 50px;
	right: 0px;
	cursor: pointer;
	display: block;
	text-indent: -9999px;
}

The Javsacript

The javascript is straightforward.

The max items variable can be set to anything you like but once you set it to a certain number each new ul will only have that many items in it at most and the slider will work according to the ul elements its sliding.

The jquery Each function is actually a for loop. You just need to pass in a variable in the anonymous function, which in this case is i. When the if statement passes as true, or when you get more then 4 items append a new ul element with the new children at the end of the last element of the current ul.

Once that is all done I create the forward and previous buttons on the fly and append that to the div with an id of featured products. Finally, after you are sure you have an unordered list and the next and previous buttons on the page then apply the jquery cycle plugin with the options I set.

That’s all there is for the javascript the rest is all in the css and html structure.

var maxItems = 4;
$(".wrapper li").each(function(i){
	if(i%maxItems == 0 && i>=maxItems){ $(".wrapper")
.append("<ul class='productfeaturelist'></ul>");}
	$(".wrapper .productfeaturelist").last().append(this);
});

/* ADD NEXT AND PREVIOUS BUTTON ONLY IF JAVASCRIPT ENABLED */
$("#featuredProducts").append('<a id="archiveNext"
class="fixPNG archiveNext" href="javascript:;">N</a>
<a id="archivePrev" class="fixPNG archivePrev" href="javascript:;">P</a>');

$('.wrapper').cycle({
	fx:     'scrollHorz',
	speed:  '600',
	timeout: 0,
	next:   '.archiveNext',
	prev:   '.archivePrev'
});