0

Помогите, пожалуйста, решить головоломку. Нужно вывести все изображения, который присутствуют в блоке, в отдельное место. При добавлении этапа готовки блюда, мы добавляем шаговую инструкцию приготовления, в каждом шаге присутствует своя картинка готовки. В полной новости шаги также разбиты по блокам. Нужно с этого блока вывести все картинки отдельно. Хочу вывести их в Карусель. Друзья, если кто-то знает как это реализовать, помогите пожалуйста!

В этом контейнере уже выводятся картинки с описанием приготовления в полной новости.

<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".

Ниже сама карусель и пример, как должны выводится картинки.

//Карусель новостей
$('.item>img').click(function() {
  var src = $(this).prop('src');
  $('#big_img').html('<img src="' + src + '">');
});
#big_img img {
	width: 500px;
  height: 300px;
}
#caruselka .item {
  float:left;
  margin: 5px;
}
#caruselka .item img {
	width: 100px;
  height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="big_img" class="poster"><img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_1280.jpg"></div>

	<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>

Буду Вам благодарен за помощь!

1 ответ 1

1
let imgs = document.querySelectorAll('.recept_shagi img');
let carusel = document.getElementById('caruselka');

[...imgs].forEach((img) => {
    let item = document.createElement('div');
    item.classList.add('item');
    let image = img.cloneNode(false);
    item.appendChild(image);
    carusel.appendChild(item);
});

Что-то вроде этого, но не факт.

5
  • Не работает, пустой блок без картинок. 20 мар 2020 в 16:50
  • Вроде все правильно, сделал клонирование элементов, теперь может?
    – Leonid
    20 мар 2020 в 17:00
  • В песочнице попробовал, все работает.
    – Leonid
    20 мар 2020 в 17:04
  • Если не клонировать img, то они исчезают в Шагах и переходят в карусель. Если клонировать, то остаются и там и здесь.
    – Leonid
    20 мар 2020 в 17:06
  • Спасибо вам огромное, все работает! 20 мар 2020 в 17:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.