Custom Carousel - Copy this React, Tailwind Component to your project

function-display_custom_carousel()-{-//-Start-output-buffering-ob_start();-//-Query-pages-$query-=-new-WP_Query(array(-'post_type'-=>-'page',-'posts_per_page'-=>--1,-));-if-(!$query->have_posts())-{-echo-'<p-class="no-pages-message">No-pages-found.</p>';-return-ob_get_clean();-//-Return-buffered-output-}-//-Inline-CSS-echo-'<style>-.custom-carousel-container-{-position:-relative;-width:-100%;-max-width:-1200px;-margin:-0-auto;-overflow:-hidden;-background-color:-#000;-}-.carousel-item-{-display:-none;-width:-100%;-height:-400px;-background-size:-cover;-background-position:-center;-position:-relative;-color:-#fff;-border-radius:-10px;-overflow:-hidden;-box-shadow:-0-4px-8px-rgba(0,-0,-0,-0.3);-}-.carousel-item.active-{-display:-block;-}-.carousel-content-{-position:-absolute;-bottom:-20px;-left:-20px;-right:-20px;-background:-rgba(0,-0,-0,-0.7);-padding:-10px;-border-radius:-5px;-}-.carousel-title-{-font-size:-1.5rem;-margin:-0-0-10px;-}-.carousel-summary-{-font-size:-1rem;-line-height:-1.5;-}-.carousel-dots-{-position:-absolute;-bottom:-10px;-left:-50%;-transform:-translateX(-50%);-display:-flex;-gap:-10px;-}-.dot-{-width:-12px;-height:-12px;-background-color:-rgba(255,-255,-255,-0.5);-border-radius:-50%;-cursor:-pointer;-transition:-background-color-0.3s;-}-.dot.active-{-background-color:-#fff;-}-</style>';-//-Carousel-container-echo-'<div-class="custom-carousel-container">';-//-Dots-for-navigation-echo-'<div-class="carousel-dots">';-$counter-=-0;-//-Carousel-items-while-($query->have_posts())-{-$query->the_post();-$page_id-=-get_the_ID();-$thumbnail-=-get_the_post_thumbnail_url($page_id,-'large');-//-Thumbnail-URL-$page_title-=-get_the_title();-$summary-=-wp_trim_words(get_the_excerpt(),-25,-'...');-//-Trimmed-summary-$active_class-=-$counter-===-0-?-'active'-:-'';-//-Carousel-item-echo-'<div-class="carousel-item"-style="background-image:-url('-.-esc_url($thumbnail)-.-');"-data-index="'-.-$counter-.-'">';-echo-'<div-class="carousel-content">';-echo-'<h2-class="carousel-title">'-.-esc_html($page_title)-.-'</h2>';-echo-'<p-class="carousel-summary">'-.-esc_html($summary)-.-'</p>';-echo-'</div>';-//-Close-carousel-content-echo-'</div>';-//-Close-carousel-item-//-Dot-navigation-echo-'<span-class="dot-'-.-$active_class-.-'"-data-index="'-.-$counter-.-'"></span>';-$counter++;-}-echo-'</div>';-//-Close-carousel-dots-echo-'</div>';-//-Close-custom-carousel-container-//-Inline-JavaScript-echo-'<script>-document.addEventListener("DOMContentLoaded",-function()-{-let-currentIndex-=-0;-const-items-=-document.querySelectorAll(".carousel-item");-const-dots-=-document.querySelectorAll(".dot");-function-showSlide(index)-{-items.forEach((item,-i)-=>-{-item.classList.toggle("active",-i-===-index);-dots[i].classList.toggle("active",-i-===-index);-});-}-dots.forEach(dot-=>-{-dot.addEventListener("click",-function()-{-currentIndex-=-parseInt(this.dataset.index);-showSlide(currentIndex);-});-});-//-Auto-slide-every-5-seconds-setInterval(function()-{-currentIndex-=-(currentIndex-+-1)-%-items.length;-showSlide(currentIndex);-},-5000);-});-</script>';-//-Cleanup-and-reset-post-data-wp_reset_postdata();-return-ob_get_clean();-}-//-Add-a-shortcode-to-display-the-carousel-add_shortcode('custom_carousel',-'display_custom_carousel');