Как указать ширину бесконечной (AJAX загрузки) карусели

Question

Я пытаюсь выяснить, как подойти к этой проблеме самым простым, эффективным способом.

Я строию карусель, содержащий сообщения, написанные пользователями. В зависимости от размера экрана (ширина), количество должностей, указанных в каруселью будет отличаться:

---------------------------------------- 
< POST POST POST POST POST POST > 
---------------------------------------- 
---------------------- 
< POST POST POST > 
---------------------- 
---------- 
<POST> 
---------- 

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

Что было бы лучшим способом сделать это? Ленивый способ - дать контейнеру что-то вроде ширины 1000000%, другой, который пришел мне на ум, - создать скрипт jquery, который будет вычислять загруженное в настоящее время количество загруженных сообщений (не в настоящее время отображаемых сообщений) * ширину сообщения и будет увеличиваться при каждом нажатии на стрелку (которая запускает загрузку сообщения из сценария базы данных).

Поскольку я не настолько продвинутый в этом роде, любое из предлагаемых выше решений хорошо, или есть более эффективные и более здравые подходы к этой проблеме?

Answer 1

В результате я использовал медиа-запросы и функцию calc() вместе с jquery.

Я добавил медиа запросов для различных разрешениях и с помощью известково() дал объектам ширину на основе требуемого количества по отношению к ширине экрана (ширина 100% - 2 * Запас (60px), деленное на желаемое количество сообщений):

@media only screen and (max-width : 1500px) { 
    .post { 
     width: calc((100% - 60px)/6); 
    } 
} 


@media only screen and (max-width : 1200px) { 
    .post { 
     width: calc((100% - 50px)/5); 
    } 
} 

Следующая с JQuery я добавил простую функцию анимации для изменения маржи в зависимости от стрелка нажатия, которая будет двигать видимую часть контейнера по его ширине значения:

contentWidth = $content.outerWidth(); 

$buttonLeft.on('click', function() { 
    $ontainer.animate({ 
     'margin-left' : '+=' + contentWidth 
    }); 
}); 

Таким образом, я гибкие посты оправданы совершенно точный в ntainer и я могу карусели их с точностью 100%. Мне пришлось добавить скрипт, который обновляет страницу при изменении размера экрана, так как с помощью этой структуры вложенных элементов было почти невозможно сделать ее отзывчивой из-за динамически меняющейся ширины поля и сообщений.