Приветствую, коллеги! При разработке кода для замкнутого слайдера появилась проблема - свойство offsetWidth возвращает 0. Браузер - Google Chrome. Начал разбираться: скопировал код в CodePen, и все неожиданно заработало. Если переменной, к которой присваивается данное свойство, задать определенное значение, например, 200px, то все начинает работать. Из этого сделал вывод, что дело именно в свойстве. Но почему так получается? Как это исправить?
На всякий случай прикладываю код:
.clients__gallery {
display: flex;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.clients__item {
width: calc(100%/6);
flex-shrink: 0;
}
let clients__gallery = document.querySelector('.clients__gallery');
let clients__position = 0;
let clients__item = clients__gallery.querySelectorAll('.clients__item');
let clients__itemWidth = clients__gallery.querySelector('.clients__item').offsetWidth;
let galleryWidth = clients__itemWidth * (clients__item.length);
let i = 0;
let j = 1;
function changeLogo() {
clients__position += clients__itemWidth; //величина смещения
clients__gallery.style.transform = 'translateX(-' + clients__position + 'px)'; //смещение галереи
clients__item[i].style.transform = 'translateX(' + galleryWidth + 'px)'; //смещение первого элемента в конец галереи
i++; //переход к следующему элементу
//Переходим от последнего элемента к первому, увеличиваем смещение элемента относительно первоначальной позиции
if (i == clients__item.length) {
i = 0;
j++;
galleryWidth = clients__itemWidth * clients__item.length * j;
}
}
setInterval(changeLogo, 2500);