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 || (window.innerWidth <=700 && 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: (info.slideData.length===1)?0: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>