Home Sliders for WordPress, work in progress

home-slides.php

<?php

/**
 * Home Slides
 * CSDev
 */

namespace CSDev;
?>

<style>
    .carousel-caption {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1;
        width: 100%;
        padding: 140px;
        padding-top: 15%;
        padding-right: 40%;
        text-align: left;
    }
</style>


<?php if ($slides = get_slides()) : ?>
    <div id="carouselHome" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
        <div class="carousel-indicators">
            <?php foreach ($slides as $index => $slide) : ?>
                <button type="button" data-bs-target="#carouselHome" data-bs-slide-to="<?= $index ?>" class="slideButton <?= $index == 0 ? 'active' : null ?>" aria-current="<?= $index == 0 ? 'true' : 'false' ?>" aria-label="Slide <?= $index ?>">
                </button>
            <?php endforeach ?>
        </div>
        <div class="carousel-inner">
            <?php foreach ($slides as $index => $slide) : ?>
                <?php [$src, $srcset] =get_featured_image_srcset($slide->ID); ?>
  
                <div class="carousel-item <?= $index == 0 ? 'active' : null ?>">
                    <img src="<?= $src  ?>" 
                         srcset="<?= $srcset  ?>"                     
                       class="slide-image d-block w-100" 
                         alt="<?= $slide->post_name ?>" >
                    <div class="carousel-caption d-none d-md-block">
                        <h1 class="fw-bold  text-warning"><?= $slide->post_title ?></h1>
                        <p><?= $slide->post_content ?></p>
                    </div>
                </div>
            <?php endforeach ?>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselHome" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselHome" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

<?php endif ?>