Всем привет помогите пожалуйста решить такую проблему, когда на странице портфолио переходишь в адаптив, сначала все отображается нормально, но потом слетают (или удаляются стили), эти проблемы начали когда подключил данный скрипт
// Ссылка на форму которую надо грузить без перезагрузки страницы:
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
}
}
]
});
});
Помогите пожалуйста
