kryamk

Ну вот тут обсуждается это и вроде бы даже что-то предлагается, но я так понял нормального решения нет. Вот swiper масштабируется (во всяком случае на моём телефоне с Android)

Не надо слайдам прописывать бутстраповские стили col-3, слайдер сам ширину распределит. А расстояние между слайдами

.slick-slide {
   margin: 0 30px;
}
.slick-list {
   margin: 0 -30px;
}

Вот такую фигню написал, работает если слайдов три или больше

Ну вот вроде рабочее решение: при окончании ресайза окна уничнотажать и снова создавать этот слайдер

function resizedw(){
	$('.slider').slick('unslick');
	$('.slider').slick({
		slidesToShow: 3,
		arrows: true,
		dots: true,
		speed: 5000,
		autoplay: true,
		pauseOnHover: false,
		pauseOnFocus: false,
		cssEase: 'linear', 
		autoplaySpeed: 0,
		customPaging: function() {
			return ''
		},
		responsive: [
		{
			breakpoint: 900,
			settings: {
				slidesToShow: 2,
			}
		},
		{
			breakpoint: 500,
			settings: {
				slidesToShow: 1
			}
		}
		]
	});
}
let doit;
window.onresize = function(){
	clearTimeout(doit);
	doit = setTimeout(resizedw, 1000);
};

для каждого слайдера нужна отдельная инициализация и asNavFor: '.slider-for' видать лишний

.top__slider-images {
width: 100%;
}

Возможно ошибка в этой строке: // font-family: 'Noto Sans JP', sans-serif;
Комметировать нужно так: /* font-family: 'Noto Sans JP', sans-serif; */

https://www.youtube.com/watch?v=rXNfDfqtM3M&t=485s