Добрый день!
Подскажите пожалуйста что не так в коде.
Есть разметка страницы:
<div class="item-box">
<div class="proektu-item"></div>
<div class="proektu-item"></div>
</div>
<div class="item-box">
<div class="proektu-item"></div>
<div class="proektu-item"></div>
</div><div class="item-box">
<div class="proektu-item"></div>
<div class="proektu-item"></div>
</div>
<div class="item">
<div class="item-wrap">
<div class="item-close"><i class="icon-cancel"></i></div>
<div class="slider">
<div class="slider-nav">
<span class="slider-left"></span>
<span class="slider-right"></span>
</div>
<div class="slider-wrap">
<div class="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
<div class="slider-dots"></div>
</div>
</div>
<div class="item">
<div class="item-wrap">
<div class="item-close"><i class="icon-cancel"></i></div>
<div class="slider">
<div class="slider-nav">
<span class="slider-left"></span>
<span class="slider-right"></span>
</div>
<div class="slider-wrap">
<div class="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
<div class="slider-dots"></div>
</div>
</div>
<div class="item">
<div class="item-wrap">
<div class="item-close"><i class="icon-cancel"></i></div>
<div class="slider">
<div class="slider-nav">
<span class="slider-left"></span>
<span class="slider-right"></span>
</div>
<div class="slider-wrap">
<div class="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
<div class="slider-dots"></div>
</div>
</div>
функционал таков:
изначально все item скрыты,отображаются только item-box и вложенные блоки proektu-item.
По клику на один из proektu-item во всплывающем окне загружается item, соответствующий его порядковому номеру.
Блок item содержит слайдер с навигацией по слайдам, слайды можно полистать, посмотреть и потом закрыть весь блок item.
Во время первого вызова блока item все работает хорошо, а вот при повторном вызове этого же блока навигация по слайдам во время перелистывания сходит с ума, перескакивает через точку, а потом и вовсе исчезает. Если открыть другой item, то на первый раз все работает хорошо, а вот с повторного все едет.
код всплывающей формы такой:
$(".proektu-item").click(function() {
$(".items .item").hide().eq($(".proektu-item").index(this)).fadeIn().addClass('active');
$(document).ready(function sliderItems() { // Ждём загрузки страницы
var slideCount = $('.items .item.active .slider .slides .slide').length; //количество слайдов
for (var n=0; n<slideCount; n++) // Цикл добавляет буллеты в блок .bullets
{
html=$('.item.active .slider-dots').html() + '<div class="slider-dot"></div>'; // К текущему содержимому прибавляется один буллет
$('.item.active .slider-dots').html(html); // и добавляется в код
};
var j = 0;
$('.item.active .slider-dots .slider-dot').eq(j).addClass('active');
});
$(function(){
var slides = $(".item.active .slider .slides").children(".slide"); // Получаем массив всех слайдов
var width = $(".item.active .slider-wrap").width(); // Получаем ширину видимой области
var i = slides.length; // Получаем количество слайдов
var offset = i * width; // Задаем начальное смещение и ширину всех слайдов
i--; // уменьшаем кол-во слайдов на один ( для проверки в будущем )
$(".item.active .slider .slides").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
$(".item.active .slider-right").click(function(){ // Событие клика на кнопку "следующий слайд"
if (offset < width * i) { // Проверяем, дошли ли мы до конца
offset += width; // Увеличиваем смещение до следующего слайда
$(".item.active .slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
$('.item.active .slider-dots .slider-dot.active').next('.slider-dot').addClass('active');
$('.item.active .slider-dots .slider-dot.active').eq(0).removeClass('active');
}
});
$(".item.active .slider-left").click(function(){ // Событие клика на кнопку "предыдущий слайд"
if (offset > 0) { // Проверяем, дошли ли мы до конца
offset -= width; // Уменьшаем смещение до предыдущего слайда
$(".item.active .slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
$('.item.active .slider-dots .slider-dot.active').prev('.slider-dot').addClass('active');
$('.item.active .slider-dots .slider-dot.active').eq(1).removeClass('active');
}
});
$('.item.active .slider-dots .slider-dot').click(function(){
$('.item.active .slider-dots .slider-dot').removeClass('active').eq($(this).index()).addClass('active');
// if (offset < width * i) { // Проверяем, дошли ли мы до конца
offset += -offset+width*$(this).index(); // Увеличиваем смещение до следующего слайда
$(".item.active .slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)");
});
});
});
$(".icon-cancel").click(function(){
$(".item.active .slider .slides").css("transform","translate3d(-"+0+"px, 0px, 0px)");
$('.item.active .slider-dots .slider-dot.active').remove('active');
$(".items .item.active").fadeOut("slow").removeClass('active');
$('.item .slider-dots .slider-dot').remove();
});
Подскажите пожалуйста что может быть не так, думаю что на закрытие нужно поставить какую-нибудь функцию очистки типо кеша или кода, чтоб в след раз все загружалось как в первый раз.
