Difficulty with jQuery Image Slider
<p>I'm having trouble creating a jQuery image slider that can also contain other elements (ie: <code>&lt;div&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;span&gt;</code>) I've skimmed the internet for tutorials and downloaded several projects only to find that they are not easily editable. I've concluded that the best way will be to make one from scratch. Does anyone know of a good  documentation source that can help walk me through the basics of creating basic jQuery image slider that is able to show all of the elements in my html? </p>

<p>Below is the html/js:
Html:</p>

<pre><code>&lt;div id="container"&gt;
&lt;div id="pbody"&gt;
    &lt;div id="slides"&gt;
        &lt;div title="Slider 1" style="background-image: url(images/TCM_slider1_WW_v1.jpg); display:block;" class="current billboard"&gt;
            &lt;p class="big"&gt;Slider 1&lt;/p&gt;
            &lt;a href="#" class="black_button"&gt;
                &lt;span&gt;Learn more&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div title="Slider 2" style="background-image: url(images/TCM_slider2_WW_v1.jpg); display:block;" class="billboard"&gt;
            &lt;p class="big"&gt;Slider 2&lt;/p&gt;
            &lt;a href="#" class="black_button"&gt;
                &lt;span&gt;Learn more&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;ol id="controls"&gt;
        &lt;li class="current"&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
    &lt;/ol&gt;
    &lt;a href="javascript:;" id="prev"&gt;Prev&lt;/a&gt;
    &lt;a href="javascript:;" id="next"&gt;Next&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>Javascript:</p>

<pre><code>var cycle = window.setInterval(next, 4000);
function prev() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .prev().add('#slides :last')
    .first().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .prev().add('#controls :last')
    .first().addClass('current')
;
}

function next() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .next().add('#slides :first')
    .last().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .next().add('#controls :first')
    .last().addClass('current')
;
}

$('#prev').on('click', prev);
$('#next').on('click', next);
$('#controls li').on('click', function() {
$self = $(this)
    .addClass('current')
    .siblings('.current').removeClass('current')
    .end()
;
$('#slides  .billboard .current')
    .removeClass('billboard current')
    .siblings(':nth-child(' + ($self.index() + 1) + ')').addClass('billboard current');
});
</code></pre>
