Каждый раз когда листается слайдер он смещается на лишних 2-3 пикселя влево и в итоге справа образовывается пустое пространство (фон вместо слайда), как это решить? (Но не более, чем на 5 пикселей)
Такая проблема появилась уже на сайте заказчика (На моем сервере все хорошо:
109.108.250.102/dubai ), так как там все слайды (img) были помещены в контейнеры со ссылками (a).
Собственно сайт заказчика:
dubai.xlandcms.ru
Кроме того, слайдер не корректно работает при изменении размера окна браузера.
Если поможете решить это, буду очень благодарен.
Код слайдера:
$(document).ready(function () {
$(".kh img").css("height", ($(".kh").width() / 1240) * 421);
$(".right-icon").css("marginTop", (($(".kh").width() / 1240) * 210.5) + "px");
$(".left-icon").css("marginTop", (($(".kh").width() / 1240) * 210.5) + "px");
var slideWidth = $(".kh").width();
var sliderTimer;
sliderTimer = setInterval(nextSlide, 10000);
$('.right-icon').click(function () {
clearInterval(sliderTimer);
nextSlide();
sliderTimer = setInterval(nextSlide, 10000);
});
$('.left-icon').click(function () {
clearInterval(sliderTimer);
prevSlide();
sliderTimer = setInterval(nextSlide, 10000);
});
function nextSlide() {
var currentSlide = parseInt($('.slide').data('current'));
currentSlide++;
if (currentSlide >= $('.slide').children().size()) {
$('.slide').css('left', -(currentSlide - 2) * slideWidth);
$('.slide').append($('.slide').children().first().clone());
$('.slide').children().first().remove();
currentSlide--;
}
$('.slide').animate({
left: -currentSlide * slideWidth
}, 300).data('current', currentSlide);
}
function prevSlide() {
var currentSlide = parseInt($('.slide').data('current'));
currentSlide--;
if (currentSlide < 0) {
$('.slide').css('left', -(currentSlide + 2) * slideWidth);
$('.slide').prepend($('.slide').children().last().clone());
$('.slide').children().last().remove();
currentSlide++;
}
$('.slide').animate({
left: -currentSlide * slideWidth
}, 300).data('current', currentSlide);
}
});
$(window).resize(function () {
$(".kh").css("height", ($(".kh").width() / 1240) * 421);
$(".kh img").css("height", ($(".kh").width() / 1240) * 421);
$(".right-icon").css("marginTop", (($(".kh").width() / 1240) * 210.5) + "px");
$(".left-icon").css("marginTop", (($(".kh").width() / 1240) * 210.5) + "px");
});
Буду очень благодарен любой помощи.