Как реализовать функционал слайдера swiper js, когда контент данных берется из сервера?

Question

[King123456]

Всем здравствуйте
Я начинающий фронтенд разработчик, заранее извиняюсь если реализация такого функционала простой.
У меня в проекте есть карточки фильмов, они сформируется с данными из папки db.json (типо сервера). Создал функцию конструктора class MovieCard, и fetch запросом отправляю данные на сайт и карточки создаются на сайте все работает. Но теперь к этим карточкам хочу применить слайдер swiper.js ,подключил инициализировал все как на инструкций, подключил опций observeParents:true , observer:true (или это ошибка), карточки исчезают с сайта. Если удалю эти опций на сайте просто показывается вертка слайдера и не работает. Еще попробовал swiper без базы данных(всю верстку поместил в HTMl) слайдер там работает , но мне нужно брать данные из базы данных. Как я понял мне надо создать функционал который свяжет fetch get запрос и swiper js , но я не знаю как. Помогите начинающему опытные фронтендеры,. Заранее Спасибо большое!!!!

<section class="section films">
      <div class="section__header">
            <h2 class="section__header-title">Фильмы</h2>
            <div class="slider__counter">
                <button class="btn-counter btn__films-prev">
                   <svg class="counter__icon prev__icon">
                        <use xlink:href="#next"></use>
                    </svg>
                </button>
                <button class="btn-counter btn__films-next ">
                    <svg class="counter__icon">
                        <use xlink:href="#next"></use>
                    </svg>
                </button>
            </div>
        </div>   
        
        <div class="swiper-container slider__card slider__films ">
            <div class="slider__wrapper swiper-wrapper">
               <!---Здесь контент из базы данных-->
            </div>
        </div>  
   </section>

////////  Вот моя классоовая функция  ////
class MovieCard {
    constructor(src,altimg,cardText,cardName,parentSelector) {
        this.src = src;
        this.altimg = altimg;
        this.cardText = cardText; 
        this.cardName = cardName; 
        this.parent = document.querySelector(parentSelector);
    }

    render() {
        const element = document.createElement("div");
        element.innerHTML = `
        <div class="movie__card swiper-slide">
            <div class="card__item">
               <div class="card__img">
                    <img class="card__photo" src=${this.src} alt="${this.altimg}">
                </div>
                <div class="card__info">
                <table>
                <tr>
                   <td><img class="card__text" src="img/icons/likes.png"></td>
                   <td><div class="card__text">4658</div></td>
                </tr>
                </table>
                <table>
                <tr>
                   <td><img class="card__text" src="img/icons/comments.png"></td>
                   <td><div class="card__text">58</div></td>
                </tr>
                </table>
                <table>
                <tr>
                   <td><img class="card__text" src="img/icons/downloads.png"></td>
                   <td><div class="card__text">642</div></td>
                </tr>
                </table>
                <table>
                <tr>
                   <td><div class="card__text">Release Date:</div></td>
                   <td><div class="card__text">${this.cardText}</div></td>
                </tr>
                </table>
                </div>
            </div>
            <h4 class="card__name">${this.cardName}</h4>
            <div class="card__rat">
              <img class="star__icon" src="img/icons/star-red.svg" alt="">
              <img class="star__icon" src="img/icons/star-red.svg" alt="">
              <img class="star__icon" src="img/icons/star-black.svg" alt="">
              <img class="star__icon" src="img/icons/star-black.svg" alt="">
              <img class="star__icon" src="img/icons/star-black.svg" alt="">
            </div>
            <span class="movie__new">NEW</span>
         </div>

        `;
        this.parent.append(element);
    }
}

const getResource = async (url) => {
    const res = await fetch(url);

    if(!res.ok) {
       throw new Error(`Could not fetch ${url}, status:${res.status}`);
    }

    return await res.json();
};

getResource(' http://localhost:3000/slider__films')
    .then(data => {
        data.forEach(({img,altimg,cardText,cardName}) => {
            new MovieCard(img,altimg,cardText,cardName,'.slider__films .slider__wrapper').render();
        });
    });

///////////  Swiper Slider ////

new Swiper(".slider__films", {
    navigation: {
        nextEl: ".btn__films-next",
        prevEl: ".btn__films-prev",
      },

      initialSlide: 1,
      spaceBetween: 30,
      slidesPerView: 5,
      centeredSlides: true,
      
      slideToClickedSlide: true,
      grabCursor: true,

});

Comments

[imko]

судя по докам .update() пинать надо чтобы после добавления слайдов они подсасывались в слайдер

[King123456]

imko, спасибо большое ,но где именно писать update??

[Pavel-ww]

King123456, может я что-то не понимаю. Но если карточки создаются, они же создаются в какой-то HTML разметке? Просто подключить swiper к этой разметке и всё, нет? Зачем городить огород с получением данных в swiper? А если у пользователя JS отключен, всё, он не увидит ваших карточек вообще?

Любые слайдеры - это шкурки для уже существующей разметки в которой уже все выведено из БД до того, как вообще пришла мысль подключить слайдер.

Тем не менее возможность динамических слайдов есть https://www.youtube.com/watch?v=ddbxsrGPRY0&t=2642s

[imko]

King123456, у экземпляра слайдера. МОжет почитаешь доки все таки?)

Answer 1

[King123456]

Ребят нашел решение может кому-то понадобится
Надо мы начало "уничтожить" слайдер,потом вызвать его внутри fetch запроса

const swapFilms =  new Swiper(".slider__films", {
        navigation: {
            nextEl: ".btn__films-next",
            prevEl: ".btn__films-prev",
          },
    
       <i> init:false,</i>
          spaceBetween: 30,
          slidesPerView: 5,
          
    });
getResource(' http://localhost:3000/slider__films')
    .then(data => {
        data.forEach(({img,altimg,cardText,cardName}) => {
            new MovieCard(img,altimg,cardText,cardName,'.slider__films .slider__wrapper').render();
        });
        <i>setTimeout(() => {swapFilms.init();},0);    </i>
        
    });

Потом я забыл добавить класс swiper-slide

element.classList.add("movie__card");
        element.classList.add("swiper-slide");
        element.innerHTML = `дальше верстка`