CSS、HTML 和 jQuery 自动滚动部分

Question

我的包装器内有 3 个部分，我想要做的是并排显示这些部分并自动滚动到右侧，这是我的 HTML：

<div class="services-wrapper">
    <section id="home-inventory" class="services-section">
        <div class="container-fluid">
            <div class="row equal">
                <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('used_equipment_inventory_image')); ?>); background-size:cover; background-position:center;"></div>
                <div class="col-md-6 padding-50">
                    <h2><?php echo wp_kses_post(get_field('used_equipment_inventory_title')); ?></h2>
                    <?php echo wp_kses_post(get_field('used_equipment_inventory_content')); ?>
                    <a href="<?php echo wp_kses_post(get_field('used_equipment_inventory_button_link')); ?>" class="button"><?php echo wp_kses_post(get_field('used_equipment_inventory_button_text')); ?></a>
                </div>
            </div>
        </div>
    </section>
    <section id="home-rentals" class="services-section">
        <div class="container-fluid">
            <div class="row equal">
                <div class="col-md-6 padding-50">
                    <h2><?php echo wp_kses_post(get_field('rentals_title')); ?></h2>
                    <?php echo wp_kses_post(get_field('rentals_content')); ?>
                    <a href="<?php echo wp_kses_post(get_field('rentals_button_link')); ?>" class="button"><?php echo wp_kses_post(get_field('rentals_button_text')); ?></a>
                </div>
                <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('rentals_image')); ?>); background-size:cover; background-position:center;"></div>
            </div>
        </div>
    </section>
    <section id="home-service" class="services-section">
        <div class="container-fluid">
            <div class="row equal">
                <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('service_image')); ?>); background-size:cover; background-position:center;"></div>
                <div class="col-md-6 padding-50">
                    <h2><?php echo wp_kses_post(get_field('service_title')); ?></h2>
                    <?php echo wp_kses_post(get_field('service_content')); ?>
                    <a href="<?php echo wp_kses_post(get_field('service_button_link')); ?>" class="button"><?php echo wp_kses_post(get_field('service_button_text')); ?></a>
                </div>
            </div>
        </div>
    </section>
</div>

这是我的CSS：

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.services-wrapper {
    display: flex;
    width: 300vw;
    height: 100vh;
}

.services-section {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

这是我的 Jquery：

<script>
    jQuery(document).ready(function($) {
        let currentIndex = 0;
        const totalSections = $('.services-section').length;
        const scrollInterval = 5000; // Set the time interval (in milliseconds)

        function autoScroll() {
            
            console.log('Current Index:', currentIndex); // Log current index
            console.log('Window Width:', window.innerWidth); // Log window width
            
            $('.services-wrapper').animate({
                scrollLeft: currentIndex * window.innerWidth // Scroll to the next section
            }, 800); // Animation duration
            
            currentIndex++;
            if (currentIndex >= totalSections) {
                currentIndex = 0; // Reset to first section
            }
        }

        setInterval(autoScroll, scrollInterval); // Auto-scroll every few seconds
    });
</script>

我确实注意到 window.innerWidth 永远不会改变，但是 autoScroll 函数确实被调用了......我做错了什么？

Answer 1

将您的 jquery 代码更新为以下内容

jQuery(document).ready(function($) {
    let currentIndex = 0;
    const $wrapper = $('.services-wrapper');
    const totalSections = $('.services-section').length;
    const scrollInterval = 5000; // Set the time interval (in milliseconds)

    function autoScroll() {
        currentIndex = (currentIndex + 1) % totalSections;
        const scrollAmount = currentIndex * $wrapper.width();
        
        console.log('Current Index:', currentIndex);
        console.log('Scroll Amount:', scrollAmount);
        
        $wrapper.animate({
            scrollLeft: scrollAmount
        }, 800, function() {
            console.log('Actual scroll position:', $wrapper.scrollLeft());
        });
    }

    setInterval(autoScroll, scrollInterval);
});