Shaun Collins
125 lines
5.0 KiB
PHP
125 lines
5.0 KiB
PHP
<div class="container py-5">
|
|
<div class="text-center mb-5">
|
|
<h2 class="fw-bold text-primary">Our Recent Jobs</h2>
|
|
<p class="lead">Take a look at some of our recent jobs.</p>
|
|
</div>
|
|
|
|
<div id="jobsCarousel" class="carousel slide shadow-lg rounded-3 overflow-hidden">
|
|
<div class="carousel-inner bg-light" id="carousel-items" style="min-height: 400px;">
|
|
<div class="carousel-item active">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#jobsCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#jobsCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
|
|
<div class="carousel-indicators" id="carousel-indicators">
|
|
<!-- Indicators will be injected here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#jobsCarousel .carousel-item img {
|
|
height: 500px;
|
|
object-fit: contain;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#jobsCarousel .carousel-item img {
|
|
height: 350px;
|
|
}
|
|
#jobsCarousel .carousel-inner,
|
|
#jobsCarousel .carousel-item > div {
|
|
min-height: 350px !important;
|
|
height: 350px !important;
|
|
}
|
|
}
|
|
|
|
#jobsCarousel .carousel-indicators [data-bs-target] {
|
|
background-color: var(--bs-primary);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const carouselInner = document.getElementById('carousel-items');
|
|
const indicatorsContainer = document.getElementById('carousel-indicators');
|
|
|
|
fetch('{{ route('Images.jobs') }}')
|
|
.then(response => response.json())
|
|
.then(images => {
|
|
if (!images || images.length === 0) {
|
|
carouselInner.innerHTML = `
|
|
<div class="carousel-item active">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
|
|
<p class="text-muted">No recent job images available.</p>
|
|
</div>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
carouselInner.innerHTML = '';
|
|
indicatorsContainer.innerHTML = '';
|
|
|
|
images.forEach((image, index) => {
|
|
// Create Item
|
|
const item = document.createElement('div');
|
|
item.className = `carousel-item ${index === 0 ? 'active' : ''}`;
|
|
|
|
const img = document.createElement('img');
|
|
img.src = `/images/Jobs/${image}`;
|
|
img.className = 'd-block w-100';
|
|
img.alt = `Job image ${index + 1}`;
|
|
|
|
item.appendChild(img);
|
|
carouselInner.appendChild(item);
|
|
|
|
// Create Indicator
|
|
const indicator = document.createElement('button');
|
|
indicator.type = 'button';
|
|
indicator.dataset.bsTarget = '#jobsCarousel';
|
|
indicator.dataset.bsSlideTo = index;
|
|
indicator.className = index === 0 ? 'active' : '';
|
|
indicator.setAttribute('aria-label', `Slide ${index + 1}`);
|
|
if (index === 0) indicator.setAttribute('aria-current', 'true');
|
|
|
|
indicatorsContainer.appendChild(indicator);
|
|
});
|
|
|
|
if (images.length <= 1) {
|
|
document.querySelectorAll('#jobsCarousel [data-bs-slide]').forEach(el => el.style.display = 'none');
|
|
indicatorsContainer.style.display = 'none';
|
|
}
|
|
|
|
// Initialize carousel after items are added
|
|
if (window.bootstrap && window.bootstrap.Carousel) {
|
|
new window.bootstrap.Carousel(document.getElementById('jobsCarousel'), {
|
|
ride: 'carousel',
|
|
interval: 5000
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading job images:', error);
|
|
carouselInner.innerHTML = `
|
|
<div class="carousel-item active">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
|
|
<p class="text-danger">Failed to load images. Please try again later.</p>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
});
|
|
</script>
|