Created a carousel but can't solve the idea of fading each div the comes in next and fade out the last
<p><a href="http://jsfiddle.net/rgbjoy/q9VGh/" rel="nofollow">http://jsfiddle.net/rgbjoy/q9VGh/</a> - As you can see, after viewing (1), when you hit next, (2) opacity will fade in, while 1 will fade back to .25. Not sure how to go about this.</p>

<p>edit: Updated fiddle to working copy.</p>

<p>jQuery</p>

<pre><code>$('.project').each(function() {
var count = 1;
var itemWidth = $(this).find('.detail li:first').outerWidth() + 10;
var total = $(this).find('.detail li').length;

$(this).find('.detail li:first').fadeTo(400,1);

$('.next').click(function() {
    var leftIndent = parseInt($(this).siblings('.detail').css('left'), 10) - itemWidth;
    if (count &lt; total) {
        count += 1;
        $(this).siblings('.detail').animate({
            'left': leftIndent
        }, 400);
    }
});

$('.prev').click(function() {
    var leftIndent = parseInt($(this).siblings('.detail').css('left'), 10) + itemWidth;
    if (count &gt; 1) {
        count -= 1;
        $(this).siblings('.detail').animate({
            'left': leftIndent
        }, 400);
    }
});
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="project"&gt;
&lt;div class="prev"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class="next"&gt;&amp;nbsp;&lt;/div&gt;
&lt;ul class="detail"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>
