Помогите, пожалуйста, решить головоломку. Нужно вывести все изображения, который присутствуют в блоке, в отдельное место. При добавлении этапа готовки блюда, мы добавляем шаговую инструкцию приготовления, в каждом шаге присутствует своя картинка готовки. В полной новости шаги также разбиты по блокам. Нужно с этого блока вывести все картинки отдельно. Хочу вывести их в Карусель. Друзья, если кто-то знает как это реализовать, помогите пожалуйста!
В этом блоке находятся все картинки рецепта
<div class="recept_shagi">
<ol>
<li>
<img src="https://cdn.tveda.ru/thumbs/f4c/f4c2e449fc5506af781914d78c09d692/5c8fedc6bccd8a543b750a175d1dd17f.jpg">
Шаг первый
</li>
<li>
<img src="https://cdn.tveda.ru/thumbs/f4c/f4c2e449fc5506af781914d78c09d692/5c8fedc6bccd8a543b750a175d1dd17f.jpg">
Шаг второй
</li>
<li>
<img src="https://cdn.tveda.ru/thumbs/f4c/f4c2e449fc5506af781914d78c09d692/5c8fedc6bccd8a543b750a175d1dd17f.jpg">
Шаг третий
</li>
</ol>
</div>
Есть карусель куда нужно вывести все картинки из блока class="recept_shagi" в id="caruselka". Чтобы каждая картинка была завернута div class="item".
На выходе должно получится вот так:
<div id="caruselka">
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_1280.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2013/06/09/06/07/barbecue-123668_1280.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2014/10/19/20/59/hamburger-494706_1280.jpg">
</div>
</div>
Есть пример, но он не работает. Перелопатил много инфы, но толку ноль.
let imgs = document.querySelectorAll('.recept_shagi img');
let carusel = document.getElementById('caruselka');
[...imgs].forEach((img) => {
let item = document.createElement('div');
item.classList.add('item');
item.appendChild(img);
carusel.appendChild(item);
});
Прошу помощи!
