alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEW:

Browse Source 
- Implementada nueva funcion para crear productos destacados por etiquetas, mostrando carrusel con los mismos en la pagina welcome.
This commit is contained in:
Bryam105
2026-06-02 09:46:53 -03:00
parent 63f91bdd6d
commit 902b8433d9
17 changed files with 480 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ui/carrousel.blade.php
+17 -12
View File
@@ -1,14 +1,18 @@
@props(['items'])
@props(['items', 'title' => 'Destacados'])
<div class="relative w-full overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-slate-50 dark:bg-panel-bg shadow-xl group" id="lauck-carousel">
@php
$id = Str::random(8);
@endphp
<div class="relative w-full overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-slate-50 dark:bg-panel-bg shadow-xl group carousel-container" id="carousel-{{ $id }}">
<!-- Título Flotante (Opcional) -->
<div class="absolute top-4 left-6 z-10 bg-neon-lime/50 dark:bg-black/50 backdrop-blur-sm px-3 py-1 rounded border border-black/30 dark:border-neon-lime/30">
<span class="text-xs font-bold text-black dark:text-neon-lime uppercase tracking-widest">Destacados</span>
<span class="text-xs font-bold text-black dark:text-neon-lime uppercase tracking-widest">{{ $title }}</span>
</div>
<!-- Contenedor de Slides (Track) -->
<div class="flex transition-transform duration-500 ease-in-out h-[400px]" id="carousel-track">
<div class="flex transition-transform duration-500 ease-in-out h-[400px] carousel-track">
@forelse($items as $item)
<div class="w-full flex-shrink-0 flex flex-col md:flex-row h-full relative">
@@ -61,11 +65,11 @@
</div>
<!-- Controles (Flechas) -->
<button id="prevBtn" class="absolute top-1/2 left-4 -translate-y-1/2 bg-black/30 hover:bg-neon-lime hover:text-neutral-900 text-white p-3 rounded-full backdrop-blur-sm transition-all border border-white/10 z-20">
<button class="prevBtn absolute top-1/2 left-4 -translate-y-1/2 bg-black/30 hover:bg-neon-lime hover:text-neutral-900 text-white p-3 rounded-full backdrop-blur-sm transition-all border border-white/10 z-20">
<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 id="nextBtn" class="absolute top-1/2 right-4 -translate-y-1/2 bg-black/30 hover:bg-neon-lime hover:text-neutral-900 text-white p-3 rounded-full backdrop-blur-sm transition-all border border-white/10 z-20">
<button class="nextBtn absolute top-1/2 right-4 -translate-y-1/2 bg-black/30 hover:bg-neon-lime hover:text-neutral-900 text-white p-3 rounded-full backdrop-blur-sm transition-all border border-white/10 z-20">
<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>
@@ -80,7 +84,8 @@
<script type="module">
$(document).ready(function() {
const $track = $('#carousel-track');
const $container = $('#carousel-{{ $id }}');
const $track = $container.find('.carousel-track');
const $slides = $track.children();
const slideCount = $slides.length;
let currentIndex = 0;
@@ -91,8 +96,8 @@
$track.css('transform', `translateX(${translateX}%)`);
// Actualizar puntos
$('.carousel-dot').removeClass('bg-lime-500 dark:bg-neon-lime scale-125').addClass('bg-black/20 dark:bg-white/20');
$(`.carousel-dot[data-index="${currentIndex}"]`).addClass('bg-lime-500 dark:bg-neon-lime scale-125').removeClass('bg-black/20 dark:bg-white/20');
$container.find('.carousel-dot').removeClass('bg-lime-500 dark:bg-neon-lime scale-125').addClass('bg-black/20 dark:bg-white/20');
$container.find(`.carousel-dot[data-index="${currentIndex}"]`).addClass('bg-lime-500 dark:bg-neon-lime scale-125').removeClass('bg-black/20 dark:bg-white/20');
}
function nextSlide() {
@@ -106,17 +111,17 @@
}
// Event Listeners
$('#nextBtn').click(function() {
$container.find('.nextBtn').click(function() {
nextSlide();
resetAutoPlay();
});
$('#prevBtn').click(function() {
$container.find('.prevBtn').click(function() {
prevSlide();
resetAutoPlay();
});
$('.carousel-dot').click(function() {
$container.find('.carousel-dot').click(function() {
currentIndex = $(this).data('index');
updateCarousel();
resetAutoPlay();