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()
}
});
Дальше сами