https://www.krasnevune.cz/user/documents/webotvurci/wt-carousel.js?v=1.09

1$(document).ready(function () {
2    if (getShoptetDataLayer("pageType") == 'homepage') {
3
4        const $carousel = $('#carousel');
5        const $oldCarouselInner = $('.carousel-inner');
6        const $oldSlides = $oldCarouselInner ? $oldCarouselInner.children() : [];
7
8        // Remove all children of the carousel
9        $carousel.empty();
10
11        // Create Swiper container
12        const $swiperContainer = $('<div>').addClass('swiper');
13        $carousel.append($swiperContainer);
14
15        // Create Swiper wrapper
16        const $swiperWrapper = $('<div>').addClass('swiper-wrapper');
17        $swiperContainer.append($swiperWrapper);
18
19        // Create slides from old carousel
20        $oldSlides.each(function () {
21            const $oldSlide = $(this);
22            const $newSlide = $('<div>').addClass('swiper-slide');
23
24            // Get the original content
25            const $originalLink = $oldSlide.find('a').first();
26            const href = $originalLink.attr('href');
27            const promoId = $originalLink.attr('data-ec-promo-id');
28            const $img = $originalLink.find('img').first();
29            const imgSrc = $img.attr('src');
30            const title = $originalLink.find('.extended-banner-title').text();
31            const ctaText = $originalLink.find('.extended-banner-link').text();
32
33            // Parse JSON from text content
34            const textContent = $originalLink.find('.extended-banner-text').text();
35            let jsonConfig = {design: 'light', video: ''};
36            let plainText = textContent;
37
38            try {
39                const jsonMatch = textContent.match(/^({[^}]+}

39)/);
40                if (jsonMatch) {
41                    jsonConfig = JSON.parse(jsonMatch[1]);
42                    plainText = textContent.replace(jsonMatch[1], '').trim();
43                }
44            } catch (e) {
45                console.error('Error parsing JSON:', e);
46            }
47
48            // Create new slide content
49            const $link = $('<a>')
50                .attr('href', href)
51                .attr('data-ec-promo-id', promoId);
52
53            // Add video if specified
54            if (jsonConfig.video) {
55                const $videoContainer = $('<div>').addClass('video-container');
56                const videoHtml = `<video autoplay="autoplay" loop muted preload="auto" playsinline webkit-playsinline poster="${imgSrc}"><source src="${jsonConfig.video}" type="video/mp4">Váš prohlížeč nepodporuje přehrávání videa.</video>`;
57                const $video = $(videoHtml);
58
59                // Add fallback image
60                const $fallbackImg = $img.clone();
61                $videoContainer.append($video, $fallbackImg);
62                $link.append($videoContainer);
63            } else {
64                $link.append($img.clone());
65            }
66
67            // Add text content with design class
68            const $texts = $('<span>').addClass('extended-banner-texts')
69                .addClass(jsonConfig.design === 'dark' ? 'text-dark' : 'text-light');
70
71            $texts.append(
72                $('<span>').addClass('extended-banner-title').text(title),
73                $('<span>').addClass('extended-banner-text').text(plainText),
74                $('<span>').addClass('extended-banner-link').text(ctaText)
75            );
76
77            $link.append($texts);
78            $newSlide.append($link);
79            $swiperWrapper.append($newSlide);
80        });
81
82        // Add navigation arrows
83        const $prevButton = $('<div>').addClass('swiper-button-prev');
84        const $nextButton = $('<div>').addClass('swiper-button-next');
85        $swiperContainer.append($prevButton, $nextButton);
86
87
88        // Initialize Swiper
89        const initSwiper = () => {
90            if (typeof Swiper !== 'undefined') {
91                const swiperInstance = new Swiper('#carousel .swiper', {
92                    slidesPerView: 4,
93                    spaceBetween: 10,
94                    loop: true,
95                    navigation: {
96                        nextEl: '#carousel .swiper-button-next',
97                        prevEl: '#carousel .swiper-button-prev',
98                    },
99                    breakpoints: {
100                        320: {
101                            slidesPerView: 1.2,
102                            spaceBetween: 14,
103                            slidesOffsetAfter: 14,
104                            slidesOffsetBefore: 14
105                        },
106                        768: {
107                            slidesPerView: 2,
108                            spaceBetween: 14,
109                        },
110                        1024: {
111                            slidesPerView: 4,
112                            spaceBetween: 10
113                        },
114                        1280: {
115                            slidesPerView: 4,
116                            spaceBetween: 10
117                        }
118                    },
119                    on: {
120                        init: function () {
121                            console.log('Swiper byl inicializován!');
122                        }
123                    }
124                });
125            } else {
126                setTimeout(initSwiper, 100);
127            }
128        };
129
130        initSwiper();
131    }
132});