Untitled

<script>
    window.onload = () => {

        const div = document.getElementById('carousel-jsonData');
        const info = JSON.parse(div?.innerText);

        if (info.theme === "narrow" && info.slideData.length !== 0) {
            // carousel div
            var carouselDiv = document.createElement("div");
            carouselDiv.classList.add("carousel");
            carouselDiv.setAttribute("data-carousel", "");

            if (info.slideData.length !== 1) {

                // Create buttons
                var prevBtn = document.createElement("button");
                prevBtn.classList.add("slide-btn", "prev");
                prevBtn.setAttribute("data-carousel-btn", "prev");
                prevBtn.textContent = "<";

                var nextBtn = document.createElement("button");
                nextBtn.classList.add("slide-btn", "next");
                nextBtn.setAttribute("data-carousel-btn", "next");
                nextBtn.innerHTML = ">";

                // Append buttons to the carouselDiv
                carouselDiv.appendChild(prevBtn);
                carouselDiv.appendChild(nextBtn);
            }

            // Create  slidesUl
            var slidesUl = document.createElement("ul");
            slidesUl.setAttribute("data-slides", "");

            // Loop through the slide data
            for (var i = 0; i < info.slideData.length; i++) {
                var slide = info.slideData[i];

                // Create  li element for each slide
                var slideLi = document.createElement("li");
                slideLi.classList.add("slide");
                if (i === 0) {
                    slideLi.setAttribute("data-active", "");
                }

                //  div element with class "slide-flex"
                var slideDiv = document.createElement("div");
                slideDiv.classList.add("slide-flex");

                //  div element with class "left-content"
                var leftDiv = document.createElement("div");
                leftDiv.classList.add("left-content");

                //  image element
                var img = document.createElement("img");
                img.setAttribute("src", slide.imgUrl);
                img.setAttribute("alt", "natural");

                // button element
                var btn = document.createElement("a");
                btn.classList.add("slide-btn-text");
                if (slide.btnText !== '') {

                    btn.textContent = slide.btnText;
                } else {
                    btn.textContent = "Book Now"
                }
                btn.href = slide.btnURL;

                // Append image and button to "left-content" div
                leftDiv.appendChild(img);
                leftDiv.appendChild(btn);

                // Create the div element with class "right-content"
                var rightDiv = document.createElement("div");
                rightDiv.classList.add("right-content");

                // Create the h1 and p elements
                var titleHeading = document.createElement("h1");
                titleHeading.textContent = slide.title;

                var descriptionPara = document.createElement("p");
                descriptionPara.textContent = slide.description;

                // Append the h1 and p  to the "right-content" div
                rightDiv.appendChild(titleHeading);
                rightDiv.appendChild(descriptionPara);

                // Append the "left-content" and "right-content" divs to the "slide-flex" div
                slideDiv.appendChild(leftDiv);
                slideDiv.appendChild(rightDiv);

                // Append the "slide-flex" div to the li element
                slideLi.appendChild(slideDiv);

                // Append the li element to the "slidesUl" element
                slidesUl.appendChild(slideLi);
            }

            carouselDiv.appendChild(slidesUl);


            var section = document.querySelector("#insert-carousel");
            section.appendChild(carouselDiv);

            // set the height of the carousel div
            var slidFlexDiv = document.querySelector('.slide-flex')
            carouselDiv.style.height = slidFlexDiv.offsetHeight + "px";

            // click event handler
            var buttons = document.querySelectorAll('button.slide-btn');

            buttons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var offset = btn.dataset.carouselBtn === 'next' ? 1 : -1
                    var slidesUl = document.querySelector('ul[data-slides]')

                    var activeSlide = slidesUl.querySelector('[data-active]')
                    var newIndex = Array.from(slidesUl.children).indexOf(activeSlide) + offset;
                    if (newIndex < 0) newIndex = Array.from(slidesUl.children).length - 1
                    if (newIndex >= slidesUl.children.length) newIndex = 0

                    slidesUl.children[newIndex].dataset.active = true
                    delete activeSlide.dataset.active
                });

                // setting the height of prev and next btn
                var img = document.querySelector('.left-content img');
                btn.style.top = (img.offsetHeight / 2) + "px";
            });

        } else if (info.theme === "wide" && info.slideData.length !== 0) {


            // Creating Element for carousel

            var slide_container_swiper = document.createElement("div");
            slide_container_swiper.classList.add("slide-container", "swiper");

            var slide_content = document.createElement("div");
            slide_content.classList.add("slide-content");

            var card_wrapper_swiper_wrapper = document.createElement("div");
            card_wrapper_swiper_wrapper.classList.add("card-wrapper", "swiper-wrapper");

            if (info.slideData.length > 2) {
                // Next and Previous Button
                var swiper_button_next = document.createElement("button");
                swiper_button_next.classList.add("swiper-button-next", "swiper-navBtn");

                var swiper_button_prev = document.createElement("button");
                swiper_button_prev.classList.add("swiper-button-prev", "swiper-navBtn");
                slide_container_swiper.appendChild(swiper_button_next)
                slide_container_swiper.appendChild(swiper_button_prev);
            }

            for (var i = 0; i < info.slideData.length; i++) {
                var data = info.slideData[i];

                var card_swiper_slide = document.createElement("div");
                card_swiper_slide.classList.add("card", "swiper-slide");

                var image_container = document.createElement("div");
                image_container.classList.add("image-container");

                //  image element
                var img = document.createElement("img");
                img.setAttribute("src", data.imgUrl);
                img.setAttribute("alt", "natural");

                //   overlay
                var overlay = document.createElement("div");
                overlay.classList.add("overlay");

                var titleHeading = document.createElement("p");
                titleHeading.className = "swiper-title";
                titleHeading.textContent = data.title;

                var overlayDesc = document.createElement("p");
                overlayDesc.className = "swiper-description";
                overlayDesc.textContent = data.description;

                overlay.appendChild(titleHeading);
                overlay.appendChild(overlayDesc);

                image_container.appendChild(img);
                image_container.appendChild(overlay);

                var card_btn = document.createElement("a");
                card_btn.classList.add("slide-btn-text");
                if (data.btnText && data.btnText !== '') {

                    card_btn.textContent = data.btnText;
                } else {
                    card_btn.textContent = "Book Now"
                }
                card_btn.href = data.btnURL;


                card_swiper_slide.appendChild(image_container)
                card_swiper_slide.appendChild(card_btn)

                card_wrapper_swiper_wrapper.appendChild(card_swiper_slide)
            }

            slide_content.appendChild(card_wrapper_swiper_wrapper)
            slide_container_swiper.appendChild(slide_content)



            var section = document.querySelector("#insert-carousel");
            section.appendChild(slide_container_swiper);

            // make the slide in the middle
            if(info.slideData.length===1){
                const cardDiv = document.querySelector('#insert-carousel .swiper-wrapper');
                cardDiv.style.justifyContent = "center";
                console.log('gin')
            }

            var swiper = new Swiper(".slide-content", {
                slidesPerView: 2,
                spaceBetween: 25,
                loop: true,
                centerSlide: 'true',
                fade: 'true',
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    dynamicBullets: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },

                breakpoints: {
                    0: {
                        slidesPerView: 1,
                    },
                    700: {
                        slidesPerView: (info.slideData.length===1)? 1 : 2,
                    }
                },
            });
        }
    }
</script>