Slider

<div class="flex w-full" x-data="App.Slider()">
    <div class="w-full h-[500px] relative" x-on:keydown.right="next" x-on:keydown.left="prev" role="region">

        <div class="absolute top-1/2 z-10 -mt-8 -left-10 sm:left-4 lg:left-10 flex items-center justify-center w-16 h-16 bg-light sm:bg-light/75 rounded-full sm:shadow-lg text-dark cursor-pointer hover:bg-light/100" x-on:click="prev" x-on:keydown.space="prev" :aria-disabled="atBeginning" :tabindex="atBeginning ? -1 : 0" :class="{'text-opacity-30 sm:opacity-50 sm:text-opacity-100 cursor-not-allowed': atBeginning, 'hover:bg-light/100':!atBeginning}"><i class="fas fa-chevron-left fa-2x"></i></div>

        <div class="w-full h-full overflow-x-scroll snap-x snap-mandatory flex space-x-10 rounded" x-ref="slider" role="listbox">
            <div x-bind="disableNextAndPreviousButtons" class="relative w-full h-full flex shrink-0 items-center snap-start" role="option">
                <picture class="">
                    <img class="absolute top-0 w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="eager" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
                <div class="absolute w-full h-full bg-gradient-to-r from-black/70 via-black/50 to-black/30 sm:from-black/50 sm:via-black/30 sm:to-black/10"></div>
                <div class="relative py-10 sm:py-20 px-16 sm:px-28 md:px-32 lg:px-44 max-w-4xl">
                    <h2 class="text-3xl sm:text-4xl font-bold text-white text-shadow-md mb-6">Food for the brain</h2>
                    <div class="text-xl sm:text-3xl text-white text-shadow-md leading-relaxed">10 foods to boost your mental wellbeing and cognitive health.</div>
                    <a href="#" x-bind="focusableWhenVisible" class="btn btn-light mt-10">Read more</a>
                </div>
            </div>
            <div x-bind="disableNextAndPreviousButtons" class="relative w-full h-full flex shrink-0 items-center snap-start" role="option">
                <picture class="">
                    <img class="absolute top-0 w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;2 800w, https://picsum.photos/1000/500?random&#x3D;2 480w" width="100%" height="100%" alt="" loading="eager" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;2">
                </picture>
                <div class="absolute w-full h-full bg-gradient-to-r from-black/70 via-black/50 to-black/30 sm:from-black/50 sm:via-black/30 sm:to-black/10"></div>
                <div class="relative py-10 sm:py-20 px-16 sm:px-44 max-w-4xl">
                    <h2 class="text-3xl sm:text-4xl font-bold text-white text-shadow-md mb-6">Food for the brain</h2>
                    <div class="text-xl sm:text-3xl text-white text-shadow-md leading-relaxed">10 foods to boost your mental wellbeing and cognitive health.</div>
                    <a href="#" x-bind="focusableWhenVisible" class="btn btn-light mt-10">Read more</a>
                </div>
            </div>
            <div x-bind="disableNextAndPreviousButtons" class="relative w-full h-full flex shrink-0 items-center snap-start" role="option">
                <picture class="">
                    <img class="absolute top-0 w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;3 800w, https://picsum.photos/1000/500?random&#x3D;3 480w" width="100%" height="100%" alt="" loading="eager" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;3">
                </picture>
                <div class="absolute w-full h-full bg-gradient-to-r from-black/70 via-black/50 to-black/30 sm:from-black/50 sm:via-black/30 sm:to-black/10"></div>
                <div class="relative py-10 sm:py-20 px-16 sm:px-44 max-w-4xl">
                    <h2 class="text-3xl sm:text-4xl font-bold text-white text-shadow-md mb-6">Food for the brain</h2>
                    <div class="text-xl sm:text-3xl text-white text-shadow-md leading-relaxed">10 foods to boost your mental wellbeing and cognitive health.</div>
                    <a href="#" x-bind="focusableWhenVisible" class="btn btn-light mt-10">Read more</a>
                </div>
            </div>
        </div>

        <div class="absolute top-1/2 z-10 -mt-8 -right-10 sm:right-4 lg:right-10 flex items-center justify-center w-16 h-16 bg-light sm:bg-light/75 rounded-full sm:shadow-lg text-dark cursor-pointer hover:bg-light/100" x-on:click="next" x-on:keydown.space="next" :aria-disabled="atEnd" :tabindex="atEnd ? -1 : 0" :class="{'text-opacity-30 sm:opacity-50 sm:text-opacity-100 cursor-not-allowed': atEnd, 'hover:bg-light/100':!atEnd}"><i class="fas fa-chevron-right fa-2x"></i></div>
    </div>
</div>