Не удалось создать показанный слайд-шоу

Question

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

Вот мой код в HTML для изображений

<div class="img-container"> 

    <div class="box-img" > 
     <img src="images/cold.jpg" alt="kikiliDesigns" id="1"> 
    </div> 

    <div class="box-img "> 
     <img src="images/dear.jpg" alt="kikiliDesigns" id="2"> 
    </div> 

    <div class="box-img"> 
     <img src="images/polar.jpg" alt="kikiliDesigns" id="3"> 
    </div> 

    <div class="box-img "> 
     <img src="images/fishing.jpg" alt="kikiliDesigns" id="4"> 
    </div> 

    <div class="box-img"> 
     <img src="images/bird.jpg" alt="kikili" id="5"> 
    </div> 

</div> 

и я создал контейнер, в котором изображение будет отображаться:

<div class="img-display"> 
</div> 

Вот код JS.

$('.box-img').each(function(){ 
    $(this).click(function(){ 
     var el = $(this).find(':first-child').clone(); 
     $('.img-display').append(el); 
    }); 
    }); 

Когда пользователь нажимает закрывающий тег изображения удаляется из img-display, чтобы позволить следующему изображению, чтобы быть клон и добавлено в контейнер.

Answer 1

(Это не полный ответ, но переполнение стека не позволит мне сделать комментарий, потому что я не хватает репутации)

Использование each в вашем блоке кода немного странно :

$('.box-img').each(function() { 
    $(this).click(function() { 
     var el = $(this).find(':first-child').clone(); 
     $('.img-display').append(el); 
}); 

Использование each будет вызывать обработчик кликов для ваших .box-img элементов существует только в пределах объема each цикла (так как только цикл each делаются работает, обработчики нажмите больше не будет не существуют). Вы должны иметь возможность заменить его следующим:

$('.box-img').click(function() { 
    var el = $(this).find(':first-child').clone(); 
    $('.img-display').append(el); 
}); 

Надеюсь, это решает вашу проблему.