В свайпере не работает пагинация при загрузке контента в него, как можно исправить?

Question

[Leo_SAN]

Подскажите, как решить такую проблему. Есть контент, который берется с ombd api и это все нужно поместить в свайпер.
Но пагинация в свайпере почему-то не работает. Использую библиотеку swiper.js

так закидываю контент в свайпер

function showMovies(data) {

  data.Search.forEach(async movie => {
    let response = await fetch(`https://www.omdbapi.com/?i=${movie.imdbID}&apikey=********`)
    let moviesListData = await response.json()
    const movieEl = document.createElement("div");
    movieEl.classList.add("swiper-slide");
    const card = document.createElement('div')
    card.classList.add('card')
    card.id = moviesListData.imdbID;
    movieEl.appendChild(card)

    movieEl.innerHTML = `

        <span id=${movie.movieIDkey} class="hide movie-key">${movie.movieIDkey}</span>
        <span class="card-title">${movie.Title}</span>
        <img src=${movie.Poster} class="card-poster" />


        <div class="card-header">
          <div class="card-info">
            <span class="card-year">${movie.Year}</span>
            <button class="card-btn-favorietes" id="${movie.watchlistBtnKey}"><svg class="like" viewBox="0 0 612 792" width="100%" height="100%"><path d="M562.413,284.393c-9.68,41.044-32.121,78.438-64.831,108.07L329.588,542.345l-165.11-149.843 c-32.771-29.691-55.201-67.076-64.892-108.12c-6.965-29.484-4.103-46.14-4.092-46.249l0.147-0.994 c6.395-72.004,56.382-124.273,118.873-124.273c46.111,0,86.703,28.333,105.965,73.933l9.061,21.477l9.061-21.477 c18.958-44.901,61.694-73.922,108.896-73.922c62.481,0,112.478,52.27,119,125.208C566.517,238.242,569.379,254.908,562.413,284.393z"/></svg></button>
          </div>
        </div>

        <div class="card-rating">
          <img src="images/star-icon.png" class="star-icon" />
          <span>${moviesListData.imdbRating}</span>
        </div>
    `;
    moviesList.appendChild(movieEl);
  });
  
}

Стили для свайпера

.swiper{
    width: 1400px;
}


.swiper-slide{
    width: 350px;
}

.swiper-wrapper{
    margin-top: 100px;
}

Его реализация в html

<div class="swiper" id="slider">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper" id="moviesList">

                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
              
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              
            </div>