Сергей Плахотин

2 варианта развития событий

1) Верстать 2 блока.
1й блок с сеткой товаров
2й блок слайдер, скрывать их через медиа запросы + делать инициализацию слайдера при нужном размере экрана и уничтожать когда размер не мобильный

2) Делать всё слайдером. Но тут дольше описывать. Лучше используйте 1й пункт

Код для слайдера примерно такой:

var catalogSlider = null;
var mediaQuerySize = 1024;

function catalogSliderInit () {
	if (!catalogSlider) {
		catalogSlider = new Swiper('.catalogSlider', {
			// ... ваши опции
		});
	}
}

function catalogSliderDestroy () {
	if (catalogSlider) {
		catalogSlider.destroy();
		catalogSlider = null;
	}
}

$(window).on('load resize', function () {
	// Берём текущую ширину экрана
	var windowWidth = $(this).innerWidth();
	
	// Если ширина экрана меньше или равна mediaQuerySize(1024)
	if (windowWidth <= mediaQuerySize) {
		// Инициализировать слайдер если он ещё не был инициализирован
		catalogSliderInit()
	} else {
		// Уничтожить слайдер если он был инициализирован
		catalogSliderDestroy()
	}
});

Дальше сами