Как инициализировать слайдер после AJAX загрузки?

Question

[Cheizer]

Друзья, подскажите пожалуйста, как инициализировать слайдер после его AJAX загрузки.
На странице есть Swiper Slider https://swiperjs.com/api/
Вызываю так, по умолчанию работает после загрузки страницы.
Но есть такой функционал на сайте, что по клику на ссылку загружается другой контент в этот слайдер, и вот тут засада,
новые слайды не работают, нужно инициализировать снова, но я не понимаю как это сделать.

Скрипты подключены внизу страницы после контента




Сам вызов слайдера на странице

var classname = '.slider-news';
      var settings = {
            speed: 1000,
            observer: true,
            spaceBetween: 50,
       }
    s6 = new Swiper($(classname + ' .swiper-container'), settings);

AJAX вызов, я так понимаю в нем нужно ответе как то вызывать перезапуск слайдера

$(function() {
	$('' + ajaxFormSelector + '').submit(function() {
		return false;
	});
	$(''+ajaxFormSelector+' select').change(function() {
    ajaxMainFunction();
    });
	function ajaxMainFunction() {
		$.ajax({
			data: $(ajaxFormSelector).serialize()
		}).done(function(response) {
			var $response = $(response);
			$(ajaxContainerSelector).fadeOut(fadeSpeed);
			setTimeout(function() {
				$(ajaxContainerSelector).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed);
				ajaxCount();
			}, fadeSpeed);

		  console.log('1');

		});
	}
});

Но если я в файле AJAXа вызываю обновление слайдера s6.update(), то конечно JS ругается что нет такой функции.
И вот не пойму, как сделать. Как перезапустить вызов слайдера который находится в другом файле, после того как отработает AJAX?

Answer 1

[Шохрух Шаймардонов]

В документации написано, что есть параметр "Observer", который изначально отмечен как false, а при установке его значения true, будет "перезапускать" слайдер при каждом изменении какого-либо свойста слайдера

Comments

[Cheizer]

Спасибо! Пробовал это, перезапускает но как то не полностью, другие функции слайдера не работают, например lazy его.

Answer 2

[Сергей Василенко]

Я так понял что
observer: true,
observeParents: true,
observeSlideChildren: true,
следят за изменением именно дерева самого слайдера, а у меня например после ajax слайдер почти не меняется (только адрес на картинки в слайдере).
Хотя...не знаю почему все эти observe плохо следят)

Поэтому я использовал пример из документации Swiper и
observerUpdate - Событие будет запущено, если наблюдатель включен и обнаружит мутации DOM.
И я запускаю повторную инициализацию.
Не знаю на сколько это верно, я ещё тестирую у себя этот код.

// К примеру это моя инициализация слайдера в другом файле
const swiper = new Swiper('.swiper', {
  observer: true, //обязательно
  observeParents: true, //обязательно
  observeSlideChildren: true, //обязательно
  // ...
});

// И здесь же запускаю слушатель событий повторно инициализирую
swiper.on('observerUpdate', function () {
  console.log('DOM изменился ');

  const swiper = new Swiper('.swiper', {
    // ...
  });
});

......К сожалению, такой код конечно сильно нагружает запросами

Answer 3

[Bogdan Dolgopolov]

В случае, если использовать observerUpdate, вы столкнётесь с сотнями повторений выполнения функции, для решения проблемы достаточно сделать повторную инициализацию после ajax запроса

function loadProjectsPostType(category) {

            $.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'POST',
                cache: true, // включить кэширование
                data: {
                    action: "load_projects",
                    category
                },

                beforeSend: () => $('.loader').addClass('active'),

                success: function (data) {
                    $('.loader').removeClass('active');
                    $('.projects__items').html(data);

                    const projectSliders = document.querySelectorAll('.project-slider')

                    projectSliders && projectSliders.forEach(slider => {

                            let projectSlider = new Swiper(slider, {

                                observer: true,
                                observeParents: true,
                                observeSlideChildren: true,
                                navigation: {
                                    nextEl: slider.querySelector('.swiper-button-next'),
                                    prevEl: slider.querySelector('.swiper-button-prev'),
                                },
                                spaceBetween: 20,
                                slidesPerView: 1,

                            })/* projectSlider */
                    }) /* forEach */
                },

                error: function(xhr, status, error) {
                    $('.error').addClass('active')
                    console.log("Ошибка запроса. Код ошибки: ",error);
                }
            })
        }