91 lines
5.8 KiB
HTML
91 lines
5.8 KiB
HTML
<div x-data="{
|
||
// Sets the time between each slides in milliseconds
|
||
autoplayIntervalTime: 4000,
|
||
slides: [
|
||
{
|
||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
|
||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||
title: 'Front end developers',
|
||
description: 'The architects of the digital world, constantly battling against their mortal enemy – browser compatibility.',
|
||
},
|
||
{
|
||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',
|
||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||
title: 'Back end developers',
|
||
description: 'Because not all superheroes wear capes, some wear headphones and stare at terminal screens',
|
||
},
|
||
{
|
||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',
|
||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||
title: 'Full stack developers',
|
||
description: 'Where "burnout" is just a fancy term for "Tuesday".',
|
||
},
|
||
],
|
||
currentSlideIndex: 1,
|
||
isPaused: false,
|
||
autoplayInterval: null,
|
||
previous() {
|
||
if (this.currentSlideIndex > 1) {
|
||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||
} else {
|
||
// If it's the first slide, go to the last slide
|
||
this.currentSlideIndex = this.slides.length
|
||
}
|
||
},
|
||
next() {
|
||
if (this.currentSlideIndex < this.slides.length) {
|
||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||
} else {
|
||
// If it's the last slide, go to the first slide
|
||
this.currentSlideIndex = 1
|
||
}
|
||
},
|
||
autoplay() {
|
||
this.autoplayInterval = setInterval(() => {
|
||
if (! this.isPaused) {
|
||
this.next()
|
||
}
|
||
}, this.autoplayIntervalTime)
|
||
},
|
||
// Updates interval time
|
||
setAutoplayInterval(newIntervalTime) {
|
||
clearInterval(this.autoplayInterval)
|
||
this.autoplayIntervalTime = newIntervalTime
|
||
this.autoplay()
|
||
},
|
||
}" x-init="autoplay" class="relative w-full overflow-hidden">
|
||
|
||
<!-- slides -->
|
||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||
<div class="relative min-h-[50svh] w-full">
|
||
<template x-for="(slide, index) in slides">
|
||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
|
||
|
||
<!-- Title and description -->
|
||
<div class="lg:px-32 lg:py-14 absolute inset-0 z-10 flex flex-col items-center justify-end gap-2 bg-linear-to-t from-surface-dark/85 to-transparent px-16 py-12 text-center">
|
||
<h3 class="w-full lg:w-[80%] text-balance text-2xl lg:text-3xl font-bold text-on-surface-dark-strong" x-text="slide.title" x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"></h3>
|
||
<p class="lg:w-1/2 w-full text-pretty text-sm text-on-surface-dark" x-text="slide.description" x-bind:id="'slide' + (index + 1) + 'Description'"></p>
|
||
</div>
|
||
|
||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Pause/Play Button -->
|
||
<button type="button" class="absolute bottom-5 right-5 z-20 rounded-full text-on-surface-dark opacity-50 transition hover:opacity-80 focus-visible:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-dark active:outline-offset-0" aria-label="pause carousel" x-on:click="(isPaused = !isPaused), setAutoplayInterval(autoplayIntervalTime)" x-bind:aria-pressed="isPaused">
|
||
<svg x-cloak x-show="isPaused" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-7">
|
||
<path fill-rule="evenodd" d="M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm6.39-2.908a.75.75 0 0 1 .766.027l3.5 2.25a.75.75 0 0 1 0 1.262l-3.5 2.25A.75.75 0 0 1 8 12.25v-4.5a.75.75 0 0 1 .39-.658Z" clip-rule="evenodd">
|
||
</svg>
|
||
<svg x-cloak x-show="!isPaused" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-7">
|
||
<path fill-rule="evenodd" d="M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm5-2.25A.75.75 0 0 1 7.75 7h.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-4.5Zm4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-4.5Z" clip-rule="evenodd">
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- indicators -->
|
||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
|
||
<template x-for="(slide, index) in slides">
|
||
<button class="size-2 rounded-full transition" x-on:click="(currentSlideIndex = index + 1), setAutoplayInterval(autoplayIntervalTime)" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-on-surface-dark' : 'bg-on-surface-dark/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||
</template>
|
||
</div>
|
||
</div> |