Question

I’m trying to add aditional functionality to a carousel. The default behaviour of the carousel is to scroll left and right which is fine.

What i really want to achieve with this carousel is to show the content of the list in a div placed right above the carousel as the user clicks on an item in the list. But with my current code, it seems like all the list items are cloned and inserted to the content class. Also, once a user clicks on a list, it should replace the items already existing in the content class.

   <div class="content">
   </div>
   <div class="carousel">
        <ul>
            <li><a href="#"><img src="test1.jpg" alt="" /><em>Excepteur sing occaecat cupidatat</em></a></li>
            <li><a href="#"><img src="test2.jpg" alt="" /><em>Excepteur sing oc</em></a></li>
            <li><a href="#"><img src="test3.jpg" alt=""/><em>Excepteur sing oc</em></a></li>
            <li><a href="#"><img src="test4.jpg" alt="" /><em>Excepteur sing occaecat</em></a></li>
            <li><a href="#"><img src="test5.jpg" alt="" /><em>Excepteur sing</em></a></li>
        </ul>
    </div>



$(function() {
      $('.carousel ul li').click(function() {
        $(this).addClass('current').siblings().removeClass('current');
        $('current li').clone().appendTo('.content');

    });
});

Answer 1

The above answer seems right but if you would like to manipulate the elements appended to class content, then you can change .text() to .html() as shown below.

$(this).addClass('current').siblings().removeClass('current');
$('.content').empty();
$('.content').append($('.current').html()) ;