WizdomWeb/resources/views/partials/slider.php

111 lines
4.3 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'];
// Slider images and their associated text & CTA
$sliderImages = [
[
'src' => '/assets/images/information-light.jpg',
'alt' => 'Information Light Banner',
'title' => 'Innovative Solutions',
'description' => 'Bringing technology and expertise together.',
'cta_text' => 'Learn More',
'cta_link' => '/services/technology',
'cta_top' => '70%',
'cta_left' => '30%'
],
[
'src' => '/assets/images/cardcatalouge-banner.jpg',
'alt' => 'Card Catalogue Banner',
'title' => 'Effortless Organization',
'description' => 'Streamline your workflow with our intuitive catalog system.',
'cta_text' => 'Learn More',
'cta_link' => '/services/catalogue-management',
'cta_top' => '100%',
'cta_left' => '75%'
],
[
'src' => '/assets/images/rolodex-banner.jpg',
'alt' => 'Rolodex Banner',
'title' => 'Contact Management Made Easy',
'description' => 'Keep track of important contacts and information in one place.',
'cta_text' => 'Get Started',
'cta_link' => '/services/contact-management',
'cta_top' => '20%',
'cta_left' => '60%',
'text_color' => 'black'
],
[
'src' => '/assets/images/oldmic.jpg',
'alt' => 'Old Microphone',
'title' => 'Broadcast Your Message',
'description' => 'Reach your audience with high-quality audio and video solutions.',
'cta_text' => 'Explore Options',
'cta_link' => '/services/media-solutions',
'cta_top' => '56%',
'cta_left' => '65%'
],
[
'src' => '/assets/images/ancient-library-shelf-crop1.jpg',
'alt' => 'Library Archives',
'title' => 'Knowledge Preservation',
'description' => 'Store and manage your records securely and efficiently.',
'cta_text' => 'Discover More',
'cta_link' => '/services/data-archiving',
'cta_top' => '50%',
'cta_left' => '50%'
],
[
'src' => '/assets/images/combosafedoor.jpg',
'alt' => 'Combination Safe Door',
'title' => 'Secure Your Data',
'description' => 'Advanced encryption and security solutions for your digital assets.',
'cta_text' => 'Protect Now',
'cta_link' => '/services/cybersecurity',
'cta_top' => '56%',
'cta_left' => '35%'
]
];
?>
<section class="hero-slider">
<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>