Slider hlavních fotek u produktu na mobilu

Script

$(function() {
if (!window.matchMedia('(max-width: 768px)').matches) return;
if (typeof $.fn.slick !== 'function') {
console.warn('Slick is not loaded; skipping mobile slider init.');
return;
}
const $pImage = $('.p-image');
if (!$pImage.length) {
console.warn('No .p-image found.');
return;
}
const $thumbs = $('.p-thumbnails-inner .p-thumbnail');
let images = [];
if ($thumbs.length) {
images = $thumbs.map(function() {
return $(this).attr('href');
}).get().filter(Boolean);
}
if (!images.length) {
const mainHref = $pImage.find('.p-main-image').attr('href');
const mainImgSrc = $pImage.find('.p-main-image img').attr('src');
if (mainHref) images = [mainHref];
else if (mainImgSrc) images = [mainImgSrc];
}
if (!images.length) {
console.warn('No image URLs found to build slider.');
return;
}
const $flags = $pImage.children('.flags, .flags-extra').length
? $pImage.children('.flags, .flags-extra').detach()
: $();
const $slider = $('<div class="p-image-slider"></div>');
images.forEach(url => {
if (!url) return;
const $slide = $(`<div class="p-image-slide"><img src="${url}" alt="" loading="lazy" /></div>`);
$slider.append($slide);
});
$pImage.empty().append($flags).append($slider);
try {
$slider.slick({
arrows: false,
dots: false,
infinite: false,
swipe: true,
adaptiveHeight: true,
touchThreshold: 6
});
} catch (err) {
console.error('Slick init failed:', err);
const fallback = images[0];
$pImage.empty().append($flags).append(`<a class="p-main-image" href="${fallback}"><img src="${fallback}" alt="" /></a>`);
return;
}
if ($thumbs.length) {
$thumbs.removeClass('highlighted').eq(0).addClass('highlighted');
$slider.on('afterChange', function(event, slick, currentSlide) {
$thumbs.removeClass('highlighted').eq(currentSlide).addClass('highlighted');
});
$thumbs.each(function(i) {
$(this).off('click.pImageSlider').on('click.pImageSlider', function(e) {
e.preventDefault();
$slider.slick('slickGoTo', i);
$thumbs.removeClass('highlighted').eq(i).addClass('highlighted');
});
});
}
});