Untitled
unknown
plain_text
a year ago
10 kB
1
Indexable
Never
<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>