139 lines
4.5 KiB
PHP
139 lines
4.5 KiB
PHP
|
|
<div x-data="heroSlider()" x-init="init()">
|
|
<section class="relative mb-10">
|
|
<!-- Slider Container -->
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
@if(!empty($content['slides']))
|
|
@foreach($content['slides'] as $index => $slide)
|
|
<div
|
|
class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
|
|
:class="currentSlide === {{ $index }} ? 'opacity-100' : 'opacity-0'"
|
|
>
|
|
<img
|
|
src="{{ asset('img/assets/' . $slide['image']) }}"
|
|
alt="{{ $slide['image_alt'] }}"
|
|
class="size-full object-cover"
|
|
/>
|
|
<div class="absolute inset-0 bg-gray-900 opacity-20"></div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative mx-auto flex max-w-3xl flex-col items-center px-6 py-32 text-center sm:py-64 lg:px-0">
|
|
<h1 class="text-hero text-white">
|
|
{!! $content['title'] !!}
|
|
</h1>
|
|
<p class="mt-4 text-xl text-white">{!! $content['subtitle'] !!}</p>
|
|
<a href="{{ $content['cta1_link'] }}" class="mt-8 inline-block btn-secondary-accent">{{ $content['cta1_text'] }}</a>
|
|
</div>
|
|
|
|
<!-- Navigation Dots -->
|
|
@if(!empty($content['slides']) && count($content['slides']) > 1)
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
|
<div class="flex space-x-3">
|
|
@foreach($content['slides'] as $index => $slide)
|
|
<button
|
|
@click="setSlide({{ $index }})"
|
|
class="w-3 h-3 rounded-full border-2 border-white/50 transition-all duration-300"
|
|
:class="currentSlide === {{ $index }} ? 'bg-white border-white' : 'bg-transparent hover:border-white/80'"
|
|
aria-label="Slide {{ $index + 1 }} anzeigen"
|
|
></button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Arrow Navigation (Optional) -->
|
|
@if(!empty($content['slides']) && count($content['slides']) > 1)
|
|
<button
|
|
@click="previousSlide()"
|
|
class="absolute left-6 top-1/2 transform -translate-y-1/2 text-white/70 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full p-2"
|
|
aria-label="Vorheriges Bild"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
@click="nextSlide()"
|
|
class="absolute right-6 top-1/2 transform -translate-y-1/2 text-white/70 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full p-2"
|
|
aria-label="Nächstes Bild"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
function heroSlider() {
|
|
return {
|
|
currentSlide: 0,
|
|
totalSlides: {{ !empty($content['slides']) ? count($content['slides']) : 0 }},
|
|
autoplayInterval: null,
|
|
autoplayTimeout: null,
|
|
|
|
init() {
|
|
if (this.totalSlides > 1) {
|
|
this.startAutoplay();
|
|
}
|
|
},
|
|
|
|
// Automatischer Wechsel (nur für Intervall)
|
|
autoNextSlide() {
|
|
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
|
|
},
|
|
|
|
// Manuelle Navigation
|
|
nextSlide() {
|
|
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
|
|
this.resetAutoplay();
|
|
},
|
|
|
|
previousSlide() {
|
|
this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
|
|
this.resetAutoplay();
|
|
},
|
|
|
|
setSlide(index) {
|
|
this.currentSlide = index;
|
|
this.resetAutoplay();
|
|
},
|
|
|
|
startAutoplay() {
|
|
// Zuerst alle bestehenden Timer löschen
|
|
this.stopAutoplay();
|
|
|
|
this.autoplayInterval = setInterval(() => {
|
|
this.autoNextSlide();
|
|
}, 5000); // Wechsel alle 5 Sekunden
|
|
},
|
|
|
|
stopAutoplay() {
|
|
if (this.autoplayInterval) {
|
|
clearInterval(this.autoplayInterval);
|
|
this.autoplayInterval = null;
|
|
}
|
|
if (this.autoplayTimeout) {
|
|
clearTimeout(this.autoplayTimeout);
|
|
this.autoplayTimeout = null;
|
|
}
|
|
},
|
|
|
|
resetAutoplay() {
|
|
// Alle Timer stoppen
|
|
this.stopAutoplay();
|
|
|
|
// Nach 5 Sekunden Pause wieder starten
|
|
this.autoplayTimeout = setTimeout(() => {
|
|
this.startAutoplay();
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|