здесь простая стопка из
<div class=img"></div>
<div class=img"></div>
собрана с строку (10 шт):
let str = [
`<div class="img" style="background-image: url('images/1.jpg');">
<div class="descrip">
<a href="...Upload/1.jpg">
<h1>Creative Lifesaver</h1></a>
</div>
</div>`,
`<div class="img" style="background-image: url('images/2.jpg');">
<div class="descrip">
<a href="...Upload/2.png">
<h1>Honest Entertainer</h1></a>
</div>
</div>` ]
Здесь 10 картинок, скрипт раскладывается через 36 градусов, показывает половину 5 штук.
Я собрал через скрипт строку из div>, чтобы регулировать их количество.
Теперь они все собрались в кучу.
Судя по вращению , скрипт работает. Значит, проблема только в CSS ?.
Не пойму, какое там позиционирование этих . Все кажется простым.
В результате весь HTML -- это
<div class="container">
<div class="ring"></div>
</div>
здесь все стили это
:is(.ring, div.img, .descrip, .shadow) {
position: absolute; }
.container {
position: relative; /*в оригинале absolute */
backgroung-color: transparent;
perspective: 1000px; /* Center of Carusel */
width: 300px; /* это в оригинале, но картинки там и 800рх и больше. */
height: 536px;
left:50%;
top:50%;
transform: translate(-50%, -50%);
margin: auto 0; }
Здесь два стиля .descrip, .shadow я сам придумал, для текста и тени. И они работают правильно ! Их можно не смотреть.
Видна только последняя 10 картинка. Они собираются в стопку.
===
Результат =====
===
Статья ===
===
Оригинал : ====
===
CODEPEN ======
2 библиотеки еще подключены, но по ним вопросов нет :)
===
все файлы ============
Правильный результат на картинке :)
картинки в оригинале грузятся только через VPN.
Спасибо.
