Carousel as button not working unless slide is in first position
<p>I'm creating a set of controls to combine product color and patterns into one image. This is accomplished by changing the values to two drop downs and clicking on images in two bxslider carousels. Everything works until you click on a carousel in the second postion after one full rotation (left: -200px). If this one is clicked, nothing happens. Here's my code for the carousel's click function and a link to a live example. You have to click on at least one picture in each carousel for it to start.</p>

<pre><code>$(document).ready(function(){
$('ul.carousel_front li img').click(function() {

    if($(this).hasClass('inactive_front'))
    {
        $(this).addClass('inactive_front').removeClass('active_front');
    }
    else 
    {
        $("ul.carousel_front li img").removeClass("active_front"); 
        $(this).addClass("active_front");
    }

    html = '&lt;img src="images/' + $('#front_finish').val() + '_' + $('.active_front').attr("id") + '_' + $('#back_finish').val() + '_' + $('.active_back').attr("id") + '.jpg"&gt;';
    $("#main-image").html(html);

}); });
</code></pre>

<p><a href="http://www.modmetal.com/test/index.html" rel="nofollow">Link to example</a></p>
