Отображение скрытого блока из карусели
 

Всем доброго времени суток.
Пробую реализовать отображение скрытых блоков при нажатии на элемент карусели. Карусель зацикленная и проблема в том, что на повторной прокрутке карусели, или когда листаешь назад, скрытые блоки не отображаются.
Причина, как я понимаю, в том, что в зацикленной карусели уже прокрученные элементы удаляются, а в начало уже встают как бы новые. Возможно, поэтому мой скрипт отображения/скрытия их не видит. Не могу решить проблему.
Если ваш стиль помощи - наводки и подсказки, пусть они будут максимально прозрачными:) Буду благодарен за помощь.

Скрытый блок

<div id='container'>
<div id="d1" class="up">
<div id="close" class="scroll-up">Сверунть</div>
</div>
				
<div id="d2" class="up">
<div id="close" class="scroll-up">Свернуть</div>
</div>
				
<div id="dn" class="up">
<div  id="close" class="scroll-up"></div>
</div>

Карусель

<ul id='spisok'>
  <li data-id='1'>
    <div class="b-carousel-block" >
      <img src="" alt="image-carusel" />
    </div>
  </li>
  <li data-id='2'>
    <div class="b-carousel-block" >
      <img src="" alt="image-carusel" />
  </div>
		...
   <li data-id='n'>
     <div class="b-carousel-block"> 
         <img src="" alt="image-carusel" />
     </div>
   </li>
</ul>

JS карусели

$(document).ready(function(){
	$(".b-carousel-button-right").click(function(){ 
		$(".h-carousel-items").animate({left: "-242px"}, 200); 
		setTimeout(function () { 
			$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); 
			$(".h-carousel-items .b-carousel-block").eq(0).remove(); 	
			$(".h-carousel-items").css({"left":"0px"}); 
		}, 300);
	});
	$(".b-carousel-button-left").click(function(){ 		
		$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); 
		$(".h-carousel-items").css({"left":"-242px"}); 	
		$(".h-carousel-items").animate({left: "0px"}, 200); 
		$(".h-carousel-items .b-carousel-block").eq(-1).remove(); 
	});
});

JS скрытого блока

$(document).ready(function (){
	$('#spisok > li').click(function (){
		$('#container > div').hide();
		var i=$(this).data('id');
		$('#d'+i).slideDown();
	});
	    $(".scroll-up").click(function () {
        $('#container > div').slideUp();
    })
});

А где вживую увидеть можно?

Kasper28,
нутро div из li вынули -- выглядит всё одинаково -- но сейчас над картинкой нет никакого li и нет никакого var i=$(this).data('id');

список li пуст кликать неначего $('#spisok > li') ==

<ul id="spisok">
							<li data-id="1">
							
							</li>
							
							<li data-id="2">
							
							</li>
							
							<li data-id="3">
							
							</li>
							
							<li data-id="4">
							
							</li>
							
							<li data-id="5">
							
							</li>

							<li data-id="6">
							
							</li>

							<li data-id="7">
							
							</li>
							
							</ul>

ну и так на всякий

<div class="scroll-up" id="close">Сверунть<img src="http://dmitriy.pro/wp-content/themes/dima/img/scroll2.png"></div>

Не понимаю, объясните, пожалуйста, более развернуто

Kasper28,
это первый скрипт

$(document).ready(function(){

	$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
		$(".h-carousel-items").animate({left: "-242px"}, 200, function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
            var first = $("#spisok li:first");
            first.clone().appendTo("#spisok"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
			first.remove(); // удаляем первый элемент карусели
			$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
		}); // производим анимацию: блок с набором картинок уедет влево на 230 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.

	});

	$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
        var last = $("#spisok li:last");
        last.clone().prependTo("#spisok"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
		$(".h-carousel-items").css({"left":"-242px"}); // устанавливаем смещение набора -222px
		$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
		last.remove(); // выбираем последний элемент карусели и удаляем его
	});

});

это второй

$(document).ready(function (){
	$('#spisok').on('click', 'li', function (){
        var i=$(this).data('id');
        $('#container > div').not($('#d'+i)).hide();
		$('#d'+i).slideDown();
	});
	    $(".scroll-up").click(function () {
        $('#container > div').slideUp();
    })

});

поменяйте

это удалить div $(".h-carousel-items .b-carousel-block").eq(0).remove(); из li -- li пуст

если удалили но ничего невернули по какому месту кликнуть чтоб это $('#spisok > li').click произошло?

Помогло. Спасибо вам большое! Сейчас буду вникать в исправление