WizdomWeb/resources/views/partials/slider.php

43 lines
2.0 KiB
PHP

<?php
/**
* Hero Slider Partial
*
* This partial dynamically loads different types of sliders based on the provided configuration.
* It supports multiple slider types, including hero and testimonial sliders, and only loads when required.
*/
// Ensure slider visibility is explicitly enabled
if (!isset($sliderConfig) || empty($sliderConfig['type'])) {
return;
}
$sliderType = $sliderConfig['type'];
$sliderImages = $sliderConfig['slides'] ?? [];
?>
<section class="hero-slider slider-<?php echo $sliderType; ?>">
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<?php foreach ($sliderImages as $index => $image): ?>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?php echo $index; ?>"
class="<?php echo $index === 0 ? 'active' : ''; ?> indicator-color-<?php echo $index + 1; ?>"
aria-label="Slide <?php echo $index + 1; ?>"></button>
<?php endforeach; ?>
</div>
<div class="carousel-inner">
<?php foreach ($sliderImages as $index => $image): ?>
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
<img src="<?php echo $image['src']; ?>" alt="<?php echo $image['alt']; ?>" class="d-block w-100 hero-image">
<div class="carousel-caption"
style="color: <?php echo $image['text_color'] ?? 'white'; ?>; position: absolute; top: <?php echo $image['cta_top']; ?>; left: <?php echo $image['cta_left']; ?>; transform: translate(-50%, -50%);">
<h2><?php echo $image['title']; ?></h2>
<p><?php echo $image['description']; ?></p>
<a href="<?php echo $image['cta_link']; ?>" class="btn btn-primary"> <?php echo $image['cta_text']; ?> </a>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>