88 lines
5.5 KiB
PHP
88 lines
5.5 KiB
PHP
<?php
|
|
|
|
/**
|
|
* Slider Partial (v12)
|
|
*
|
|
* This partial dynamically loads different types of sliders based on the provided configuration.
|
|
* It supports multiple slider types, including standard and testimonial sliders, and only loads when required.
|
|
*
|
|
* ## Configuration Options:
|
|
* - `id` (string) - Unique identifier for the slider (used for styling and debugging)
|
|
* - `type` (string) - Allowed values: 'standard', 'testimonial'
|
|
* - `height` (string) - Defines the slider height (default: '65vh')
|
|
* - `object_fit` (string) - Image object-fit property ('cover', 'contain', etc.)
|
|
* - `interval` (int) - Time in milliseconds between slides (default: 5000ms)
|
|
* - `pause_on_hover` (bool) - Pauses autoplay when hovered (default: true)
|
|
* - `controls` (bool) - Shows/hides navigation controls (default: true)
|
|
* - `indicators` (bool) - Shows/hides carousel indicators (default: true)
|
|
* - `animation` (string) - Allows 'slide' or 'fade' animation (default: 'slide')
|
|
* - `cta_width` (string) - Defines CTA container width (default: 'auto')
|
|
* - `cta_text_align` (string) - Text alignment within CTA (default: 'center')
|
|
* - `lazy_load` (bool) - Enables lazy loading for images (default: true)
|
|
*/
|
|
|
|
// Ensure slider visibility is explicitly enabled
|
|
if (!isset($sliderConfig) || empty($sliderConfig['type'])) {
|
|
error_log("[ERROR] Missing or invalid slider configuration.");
|
|
return;
|
|
}
|
|
|
|
$validTypes = ['standard', 'testimonial'];
|
|
$sliderType = in_array($sliderConfig['type'], $validTypes) ? $sliderConfig['type'] : 'standard';
|
|
$sliderId = htmlspecialchars($sliderConfig['id'] ?? 'default', ENT_QUOTES, 'UTF-8');
|
|
$sliderHeight = $sliderConfig['height'] ?? '65vh';
|
|
$objectFit = htmlspecialchars($sliderConfig['object_fit'] ?? 'cover', ENT_QUOTES, 'UTF-8');
|
|
$interval = $sliderConfig['interval'] ?? 5000; // Default to 5 seconds
|
|
$pauseOnHover = isset($sliderConfig['pause_on_hover']) && $sliderConfig['pause_on_hover'] ? 'hover' : 'false';
|
|
$showControls = $sliderConfig['controls'] ?? true;
|
|
$showIndicators = $sliderConfig['indicators'] ?? true;
|
|
$animationType = $sliderConfig['animation'] ?? 'slide';
|
|
$ctaWidth = htmlspecialchars($sliderConfig['cta_width'] ?? 'auto', ENT_QUOTES, 'UTF-8');
|
|
$ctaTextAlign = htmlspecialchars($sliderConfig['cta_text_align'] ?? 'center', ENT_QUOTES, 'UTF-8');
|
|
$lazyLoad = isset($sliderConfig['lazy_load']) && $sliderConfig['lazy_load'] ? 'loading="lazy"' : '';
|
|
$sliderImages = $sliderConfig['slides'] ?? [];
|
|
|
|
// Debugging logs for missing or incorrect configurations
|
|
if (empty($sliderImages)) {
|
|
error_log("[ERROR] Slider '$sliderId' has no slides defined.");
|
|
}
|
|
if (!in_array($sliderType, $validTypes)) {
|
|
error_log("[ERROR] Invalid slider type '$sliderType' for slider '$sliderId'.");
|
|
}
|
|
?>
|
|
|
|
<section class="slider slider-<?php echo $sliderId; ?> slider-<?php echo htmlspecialchars($sliderType, ENT_QUOTES, 'UTF-8'); ?>"
|
|
data-animation="<?php echo htmlspecialchars($animationType, ENT_QUOTES, 'UTF-8'); ?>"
|
|
style="height: <?php echo htmlspecialchars($sliderHeight, ENT_QUOTES, 'UTF-8'); ?>; overflow: hidden; position: relative;">
|
|
<div id="carousel" class="carousel <?php echo $animationType === 'fade' ? 'carousel-fade' : ''; ?> slide" data-bs-ride="carousel" data-bs-interval="<?php echo $interval; ?>" data-bs-pause="<?php echo $pauseOnHover; ?>">
|
|
|
|
<?php if ($showIndicators) : ?>
|
|
<div class="carousel-indicators">
|
|
<?php foreach ($sliderImages as $index => $image): ?>
|
|
<button type="button" data-bs-target="#carousel" 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; ?>" <?php echo $index === 0 ? 'aria-current="true"' : ''; ?>></button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="carousel-inner">
|
|
<?php foreach ($sliderImages as $index => $image): ?>
|
|
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
|
|
<img src="<?php echo htmlspecialchars($image['src'], ENT_QUOTES, 'UTF-8'); ?>"
|
|
alt="<?php echo htmlspecialchars($image['alt'], ENT_QUOTES, 'UTF-8'); ?>"
|
|
class="d-block w-100 slider-image grayscale-effect"
|
|
style="height: <?php echo htmlspecialchars($sliderHeight, ENT_QUOTES, 'UTF-8'); ?>; object-fit: <?php echo $objectFit; ?>; filter: grayscale(100%); transition: filter 0.5s ease-in-out;"
|
|
<?php echo $lazyLoad; ?>>
|
|
<div class="carousel-caption"
|
|
style="color: <?php echo htmlspecialchars($image['text_color'] ?? 'white', ENT_QUOTES, 'UTF-8'); ?>; position: absolute; top: <?php echo htmlspecialchars($image['cta_top'], ENT_QUOTES, 'UTF-8'); ?>; left: <?php echo htmlspecialchars($image['cta_left'], ENT_QUOTES, 'UTF-8'); ?>; transform: translate(-50%, -50%); width: <?php echo $ctaWidth; ?>; text-align: <?php echo $ctaTextAlign; ?>;">
|
|
<h2><?php echo htmlspecialchars($image['title'], ENT_QUOTES, 'UTF-8'); ?></h2>
|
|
<p><?php echo htmlspecialchars($image['description'], ENT_QUOTES, 'UTF-8'); ?></p>
|
|
<a href="<?php echo htmlspecialchars($image['cta_link'], ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-primary slider-cta"> <?php echo htmlspecialchars($image['cta_text'], ENT_QUOTES, 'UTF-8'); ?> </a>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|