function custom_page_slider_shortcode_fixed( $atts ) {
    // پارامترهای پیش‌فرض
    $atts = shortcode_atts( array(
        'pages_per_page' => 16, // تعداد کل صفحات
    ), $atts, 'page_slider_final' );

    // کوئری برای دریافت صفحات
    $query_args = array(
        'post_type'      => 'page',
        'posts_per_page' => intval( $atts['pages_per_page'] ),
        'post_status'    => 'publish',
    );

    $query = new WP_Query( $query_args );

    // شروع خروجی HTML
    ob_start();
    if ( $query->have_posts() ) : ?>
        <style>
            .page-slider-container {
                position: relative;
                overflow: hidden;
                width: 100%;
                max-width: 1200px;
                margin: auto;
            }

            .page-slider-track {
                display: flex;
                transition: transform 0.5s ease-in-out;
            }

            .page-slider-item {
                flex: 0 0 25%; /* نمایش 4 اسلاید در هر ردیف */
                box-sizing: border-box;
                padding: 10px;
                text-align: center;
            }

            .page-slider-item img {
                max-width: 100%;
                height: auto;
                margin-bottom: 10px;
            }

            .slider-nav {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background-color: rgba(0, 0, 0, 0.6);
                color: #fff;
                border: none;
                font-size: 20px;
                padding: 10px;
                cursor: pointer;
                z-index: 10;
            }

            .slider-nav.prev { left: 10px; }
            .slider-nav.next { right: 10px; }

            .slider-nav:hover {
                background-color: #d10a11;
            }
        </style>

        <div class="page-slider-container">
            <button class="slider-nav prev">&#10094;</button> <!-- فلش چپ -->
            <div class="page-slider-track">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                    <div class="page-slider-item">
                        <a href="<?php the_permalink(); ?>">
                            <?php if ( has_post_thumbnail() ) : ?>
                                <?php the_post_thumbnail( 'medium' ); ?>
                            <?php endif; ?>
                            <h3><?php the_title(); ?></h3>
                        </a>
                    </div>
                <?php endwhile; ?>
            </div>
            <button class="slider-nav next">&#10095;</button> <!-- فلش راست -->
        </div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.querySelector('.page-slider-container');
    const track = container.querySelector('.page-slider-track');
    const slides = container.querySelectorAll('.page-slider-item');
    const prevButton = container.querySelector('.slider-nav.prev');
    const nextButton = container.querySelector('.slider-nav.next');

    let slidesToShow = 4;
    let currentGroup = 0;
    let slideWidth = 0;
    let totalGroups = 0;

    function getSlidesToShow() {
        const width = window.innerWidth;
        if (width < 600) return 1;
        if (width < 900) return 2;
        return 4;
    }

    function updateLayout() {
        slidesToShow = getSlidesToShow();
        slideWidth = container.offsetWidth / slidesToShow;

        slides.forEach(slide => {
            slide.style.flex = `0 0 ${slideWidth}px`;
        });

        totalGroups = Math.ceil(slides.length / slidesToShow);
        if (currentGroup >= totalGroups) currentGroup = 0;
        updateSlider();
    }

    function updateSlider() {
        const offset = currentGroup * slidesToShow * slideWidth;
        track.style.transform = `translateX(-${offset}px)`;
    }

    function nextGroup() {
        currentGroup = (currentGroup + 1) % totalGroups;
        updateSlider();
    }

    function prevGroup() {
        currentGroup = (currentGroup - 1 + totalGroups) % totalGroups;
        updateSlider();
    }

    nextButton.addEventListener('click', nextGroup);
    prevButton.addEventListener('click', prevGroup);
    window.addEventListener('resize', updateLayout);

    // Initial layout
    updateLayout();

    // Autoplay
    setInterval(() => {
        nextGroup();
    }, 4000);
});
</script>



    <?php
    endif;

    wp_reset_postdata();
    return ob_get_clean();
}
add_shortcode( 'page_slider_final', 'custom_page_slider_shortcode_fixed' );



این یه مشکل بزرگ داره، وقتی که چهارتا پست شروع می کنن به اسلاید کردن، دیگه بعدش هیچ پستی نمایش داده نمیشه و اسلایدر خالی میشه