дополнительная функциональность для карусели

Question

Я пытаюсь добавить дополнительную функциональность в карусель. Поведение карусели по умолчанию - это прокрутка влево и вправо, что нормально.

Чего я действительно хочу добиться с помощью этой карусели, так это показать содержимое списка в элементе div, расположенном прямо над каруселью, когда пользователь нажимает на элемент в списке. Но с моим текущим кодом кажется, что все элементы списка клонированы и вставлены в класс содержимого. Кроме того, когда пользователь нажимает на список, он должен заменить элементы, уже существующие в классе контента.

   <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

Приведенный выше ответ кажется правильным, но если вы хотите управлять элементами, добавляемыми к содержимому класса, вы можете изменить .text () на .html (), как показано ниже.

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

Answer 2

почему ты клонируешь это? использование insted

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