JQuery内容滑块仅能单次回退，点击前进报错求助

Let's fix your jQuery content slider step by step. I've gone through your code and spotted several issues causing the errors and unexpected behavior:

Key Issues in Your Code #

• Incorrect end-of-slides check for the next button: You’re checking if(show_index == sliders.length) but slide indexes start at 0. The last slide’s index is sliders.length - 1, so this condition will never trigger.
• Wrong order for show_index++: When moving forward, eq(show_index++) adds 1 to show_index after selecting the slide. This means your index variable won’t correctly track the current active slide for subsequent clicks.
• Broken prev button logic: When on the first slide (show_index == 0), using eq(show_index-1) (which equals -1, while jQuery does handle this as the last slide, it’s not intuitive). Worse, you never update show_index after switching to the last slide, so the slider will always think it’s on the first slide.
• Wrong order for show_index--: Similar to the next button, eq(show_index--) updates the index after selecting the slide, leading to incorrect tracking.
• Missing visibility rule for active slides: Your CSS hides all slides by default, but there’s no rule to show the slide with the active_slider class.

Fixed JavaScript Code #

$(document).ready(function(){ 
    var sliders = $('.full_slider_big_item'); 
    var totalSlides = sliders.length;
    var show_index = 0; 

    // Show the initial slide
    sliders.eq(show_index).addClass('active_slider'); 

    $(".full_slider_big_items_next").click(function(){ 
        console.log('clicked next');
        // Remove active class from current slide
        sliders.eq(show_index).removeClass('active_slider'); 

        if(show_index === totalSlides - 1){
            // Loop back to the first slide if we're on the last one
            show_index = 0;
        } else {
            // Move to the next slide
            show_index++;
        }

        // Mark the new slide as active
        sliders.eq(show_index).addClass('active_slider');
    }); 

    $(".full_slider_big_items_prev").click(function(){ 
        console.log('clicked prev');
        // Remove active class from current slide
        sliders.eq(show_index).removeClass('active_slider'); 

        if(show_index === 0){
            // Jump to the last slide if we're on the first one
            show_index = totalSlides - 1;
        } else {
            // Move to the previous slide
            show_index--;
        }

        // Mark the new slide as active
        sliders.eq(show_index).addClass('active_slider');
    }); 
});

Critical CSS Addition #

Add this rule to your CSS to make active slides visible:

.full_slider_big_item.active_slider {
    display: block;
}

HTML Check #

Make sure your HTML includes complete slide elements with the full_slider_big_item class (your snippet cuts off). Each slide should look like this:

<div class="full_slider_big_item">
    <!-- Your slide content (image + text containers) here -->
</div>

Explanation of Changes #

• Cleaner index tracking: Stored sliders.length in totalSlides for more readable code.
• Logical flow: We first remove the active class from the current slide, update the index correctly, then apply the active class to the new slide.
• Explicit loop logic: Instead of relying on negative indexes, we explicitly set the index to the opposite end when hitting the first/last slide.
• Fixed visibility: The new CSS rule ensures only the active slide is displayed, which was a major missing piece.

内容的提问来源于stack exchange，提问作者user8749260