Задать вопрос

King123456

Ответы пользователя по тегу JavaScript

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

    @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 = `дальше верстка`
    Ответ написан
    Комментировать
    Комментировать

  • Как обновить форму в модальном окне после отправки?

    @King123456
    думаю вам надо создать переменную функцию который вводит сообщение об успешном отправлении,потом очищает форму по setTimeout
    Типо вот такого написано на чистом js 
    function showThanksModal(message) {
        const prevModalDialog = document.querySelector('.modal__dialog');

    prevModalDialog.classList.add('hide');
    openModal();    

    const thanksModal = document.createElement('div');
    thanksModal.classList.add('modal__dialog');
    thanksModal.innerHTML = `
        <div class = "modal__content">
        <button data-close class="modal__close" type="button">
            <svg data-close  class="modal__close-icon">
                <use xlink:href="#close"></use>
            </svg>
        </button>
            <div class="modal__title">${message}</div>
        </div
        `;
        document.querySelector('.modal').append(thanksModal);
        setTimeout( () => {  
            thanksModal.remove(); 
            prevModalDialog.classList.add('show');
            prevModalDialog.classList.remove('hide');
            closeModal('.modal');
        },4000);
    Ответ написан
    Комментировать
    Комментировать