83 lines
2.5 KiB
PHP
Executable File
83 lines
2.5 KiB
PHP
Executable File
<div >
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
|
|
<main class=" text-white flex items-center justify-center py-2" x-data="carouselFilter()">
|
|
<div class="container grid grid-cols-1">
|
|
|
|
|
|
<div class="row-start-2 col-start-1"
|
|
x-show="active == 0"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 transform scale-90"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 transform scale-90"
|
|
>
|
|
<div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
|
|
|
|
|
|
|
|
<div class="carousel col-start-1 row-start-1" x-ref="carousel" >
|
|
@php
|
|
$n=0;
|
|
@endphp
|
|
@foreach ($promociones as $promocion)
|
|
<div class=" px-3 ">
|
|
|
|
<img
|
|
src="{{asset($promocion->slider)}}"
|
|
loading="lazy" class=" object-cover drop-shadow-lg h-[150px] xl:h-[350px] sm:h-[150px] md:h-[300px] lg:h-[300px] w-full object-center rounded-lg sm:rounded-3xl m-2 ">
|
|
|
|
|
|
</div>
|
|
@php
|
|
$n++;
|
|
@endphp
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</main>
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
|
|
<script>
|
|
function carousel() {
|
|
return {
|
|
active: 0,
|
|
init() {
|
|
var flkty = new Flickity(this.$refs.carousel, {
|
|
wrapAround: true,
|
|
autoPlay:true
|
|
});
|
|
flkty.on('change', i => this.active = i);
|
|
}
|
|
}
|
|
}
|
|
|
|
function carouselFilter() {
|
|
return {
|
|
active: 0,
|
|
changeActive(i) {
|
|
this.active = i;
|
|
|
|
this.$nextTick(() => {
|
|
let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
|
|
flkty.resize();
|
|
|
|
console.log(flkty);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</div> |