Почему js скрипт верно срабатывает только при ресайзинге окна?

Question

[Alexander Mischuk]

Привет, уже кучу времени слил на то, чтобы привести скрипт к нужному виду. Прошу помощи и посмотрите скрипт, возможно, что вы заметите, где я ошибку сделал.

Вкратце о проблеме.

Изначально должно быть пять кнопок в пагинации и навигация в виде prev с next.
Пять кнопок появляются только при ресайзинге окна.
Предполагаю, что есть какой-то конфликт со скриптом инициализурующим карусель.
Буду очень благодарен за любую помощь.

Если кому удобнее, то ссылка на проблемную страницу

equalWidth = function() {
	var controls = $('#sync2 .owl-item').width();
	$('.owl-theme .owl-controls .owl-buttons div').css({
		'width': controls + 'px'
	});
	$('#sync2').css({
		'padding-left': controls + 'px',
		'padding-right': controls + 'px'
	});
};
$(document).ready(equalWidth);
$(window).resize(equalWidth);

Answer 1

[Андрей Голуменов]

$('#sync2').css({
		'padding-left': controls + 'px',
		'padding-right': controls + 'px'
	});

У вас изначально и рендерится 5 блоков. Но в коде приведенном выше задаются отступы, которых изначально у блока обвертки нет, равные ширине блока => + 2 блока контролов навигации и -2 блока с ссылками на слайды.

Попробуйте переделать так:

// Width
equalWidth = function() {
var controls = $('#sync2').width()/7;
$('.owl-theme .owl-controls .owl-buttons div').css({
'width': controls + 'px'
});
$('#sync2').css({
'padding-left': controls + 'px',
'padding-right': controls + 'px'
});
};
$(document).ready(equalWidth);
$(window).resize(equalWidth);
//Height
square_nav = function() {
var sn = $('#sync2 .owl-item').width();
$('#sync2 .owl-item, .owl-theme .owl-controls .owl-buttons div').css({
'height': sn + 'px'
});
};
$(document).ready(square_nav);
$(window).resize(square_nav);

И расположить этот код до инициализации каруселей

Comments

[Alexander Mischuk]

Можете объяснить var controls = $('#sync2').width()/7 ? Рендерит, то семь элементов, но в итоге все равно ошибки и срабатывает только после ресайза.

[Alexander Mischuk]

Вчера остановился на этом варианте $(window).bind("load", function() {/*code here*/}); и убрал срабатывание на ready. Не знаю на сколько это правильно, но делает то, что нужно.