<?php
$categoria_id = 5;

$args = array(
    'cat' => $categoria_id,
    'posts_per_page' => 9,
);
$query = new WP_Query($args);
?>

<div class="carrusel">
    <div class="carrusel-inner">
        <?php if ($query->have_posts()) : ?>
            <?php $post_count = 0; ?>
            <?php while ($query->have_posts()) : $query->the_post(); ?>
                <?php if ($post_count % 3 == 0): ?>
                    <div class="carrusel-slide">
                <?php endif; ?>

                <div class="post-item">
                    <a href="<?php the_permalink(); ?>">
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('medium'); ?>
                        <?php endif; ?>
                        <h3><?php the_title(); ?></h3>
                        <p><?php echo get_the_excerpt(); ?></p>
                    </a>
                </div>

                <?php $post_count++; ?>
                <?php if ($post_count % 3 == 0): ?>
                    </div> <!-- Fin de slide -->
                <?php endif; ?>
            <?php endwhile; ?>
            <?php if ($post_count % 3 != 0): ?>
                </div> <!-- Fin de último slide -->
            <?php endif; ?>
            <?php wp_reset_postdata(); ?>
        <?php endif; ?>
    </div>
</div>
document.addEventListener('DOMContentLoaded', function () {
    const carruselInner = document.querySelector('.carrusel-inner');
    const totalSlides = document.querySelectorAll('.carrusel-slide').length;
    let currentSlide = 0;

    function showSlide(index) {
        const offset = index * -100;
        carruselInner.style.transform = `translateX(${offset}%)`;
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        showSlide(currentSlide);
    }

    // Navegación automática cada 3 segundos
    setInterval(nextSlide, 3000);
});

<style>

.carrusel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.carrusel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carrusel-slide {
    display: flex;
    flex: 0 0 100%;
    justify-content: space-between;
}

.post-item {
    width: 32%;
    background-color: #f9f9f9;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.post-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.post-item h3 {
    font-size: 1.2em;
    margin-top: 10px;
}

.post-item p {
    font-size: 0.9em;
    color: #666;
}


</style>