В чем ошибка при использование swiper в WordPress?

Question

[Darkness]

Проблема:
Мне нужно из поста показать все картинки в слайдере, вот в таком виде: тык
Я вытаскиваю картинки из поста так:

let postImages = document.querySelectorAll('.wp-block-image > img');
let slider = document.querySelector('.swiper-slide');
postImages.forEach((image) => {
           slider.append(image)
})

Верстка:

<div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
             <div class="swiper-slide"></div>
      </div>
                                               
 <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
 </div>
 <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
               <div class="swiper-slide"></div>
       </div>
</div>

Я понимаю, что скорее всего из-за того что я не использую цикл, у меня не работает слайдер.
JS и Style подключены. Такие фотки большие, из-за того что стиле не дозаданны, но суть в том, что сам слайдер скролится, но не верно работает отображение! Надеюсь, тут помогут, ибо вообще не понимаю, что я делаю не так.

Вот так выглядит:

Answer 1

[nokimaro]

Судя по приведённому коду из вашего примера https://stackblitz.com/edit/swiper-demo-30-thumbs-...

Нужно в контейнер <div class="swiper-wrapper"> помещать блок где адрес изображения задан через background-image:url()

<div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)"></div>

То что вы делаете сейчас это внутрь <div class="swiper-slide"> помещаете <img> элементы

А надо
- создать новый элемент div class = swiper-slide
- задать ему style background-image:url(...) c адресом изображения (из img src)
- этот созданный элемент поместить внутрь <div class="swiper-wrapper">
- повторить для следующего изображения

Что делаете вы

<div class="swiper-wrapper">
<div class="swiper-slide">
   <img src=...
   <img src=...
   <img src=...

</div>
</div>

Что надо сделать

<div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(...)"></div>
    <div class="swiper-slide" style="background-image:url(...)"></div>
    <div class="swiper-slide" style="background-image:url(...)"></div>
</div>