Почему слайдер в адаптиве слетает?

Всем привет помогите пожалуйста решить такую проблему, когда на странице портфолио переходишь в адаптив, сначала все отображается нормально, но потом слетают (или удаляются стили), эти проблемы начали когда подключил данный скрипт

// Ссылка на форму которую надо грузить без перезагрузки страницы:
        var form = $('form[action="https://dev.itlvl.com/nashi-raboty/"]');

        // Вешаем на поля формы обработчик кликов:

        form.find('input[type="radio"]').click(async function(e) {

            e.preventDefault(); // Предотвращаем клик
            form.css('pointer-events', 'none'); // Блокрируем повторные клики

            // Формируем ссылку на страницу которая содержит данные кликнутого таба:
            var link = 'https://dev.itlvl.com/nashi-raboty/?' + $(this).attr('name') + '=' + $(this).val();

            var request = $.ajax(link); // Запускаем процесс загрузкки этой страницы

            // Пока грузится, делаем плавное исчезновение текущего таба:
            await $('.grid-listing').animate({ opacity: 0 }, 500).promise();

            // Получаем те данные что загрузили и меняем URL в браузере:
            var html = await request; history.pushState(null, null, link);

            // Удаляем атрибут активности со всех полей:
            form.find('input[type="radio"]').removeAttr('checked');

            $(this).attr('checked', 'checked'); // Делаем активным текущий таб

            // Вставляем данные с нового таба на текущую страницу:

            var doc = new DOMParser().parseFromString(html, 'text/html');

            var html = $('.grid-listing', doc).html();
            $('.grid-listing').html(html);

            var html = $('.listing-page__pagination', doc).html();
            $('.listing-page__pagination').html(html);

            // Делаем плавное появление для вставленного контента:
            await $('.grid-listing').animate({ opacity: 1 }, 500).promise();

            form.css('pointer-events', ''); // Снимаем блокировку кликов

        });

    });
</script>


Можете подсказать что нужно исправить в нем что бы ничего не слетало и в адаптиве нормально отображался слайдер, а не пост за постом, вот ссылка на сайт
https://dev.itlvl.com/nashi-raboty/?service-id=all

И такая же проблема появилась на это странице
https://dev.itlvl.com/otzyvy-nashih-klientov/

тоже после работы скрипта стили криво работают

За ранее всем спасибо

а вот код слайдера
$(window).on('load resize', function() {
  if ($(window).width() < 767.98) {
    $('.work-home .grid-listing__row:not(.slick-initialized)').slick({
      centerMode: true,
      centerPadding: '30px',
      arrows: false,
      dots: false,
      infinite: true,
      speed: 300,

      slidesToShow: 1
    });
  } else {
    $(".work-home .grid-listing__row.slick-initialized").slick("unslick");
  }
});

$(document).ready(function(){
  $('.wrapp-projects').slick({
    infinite: true,
  slidesToShow: 3,
  appendArrows:'.slider-arrows',
  slidesToScroll: 1,
  prevArrow: '<div class="prev"><svg class="icon"><use xlink:href="#arrow-prev"></use></svg></div>',
    nextArrow: '<div class="next"><svg class="icon"><use xlink:href="#arrow-next"></use></svg></div>',
    responsive: [
    {
      breakpoint: 767.98,
      settings: {
        centerMode: true,
      centerPadding: '30px',
      arrows: false,
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 1
      }
    }
  ]
  });
});


Помогите пожалуйста
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
kryamk
@kryamk
Так вам нужно заново инициализировать слайдер после того как загрузятся новые элементы при клике по табу
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы