从其他页面跳转后Owl Carousel prev按钮失效问题咨询

• 两个独立页面：第一页通过Owl Carousel的<a>标签带hash跳转到第二页对应的Owl Carousel幻灯片
• 第二页的Owl Carousel配有自定义prev/next按钮，按钮文字随幻灯片切换更新
• 问题：从第一页跳转至第二页对应幻灯片后，直接点击prev按钮无响应；点击next按钮正常，且点击next后prev按钮恢复正常

第一页代码 #

<div class="owl-carousel home-page-project-design home-page-manufacturing-list">
    <a href="../project-design-showcase.php#walk-in-wardrobes">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/walk-in-closets-and-wardrobes-images/1.webp" alt="Image 1">
            </div>
            <div class="image-text">Walk-in Wardrobes</div>
        </div>
    </a>
    <a href="../project-design-showcase.php#bedrooms">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/bedrooms-images/1.webp" alt="Image 2">
            </div>
            <div class="image-text">Bedrooms</div>
        </div>
    </a>
    <a href="../project-design-showcase.php#bathroom-and-vanities">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/bathroom-and-vanities-images/1.webp" alt="Image 3">
            </div>
            <div class="image-text">Bathroom & Vanities</div>
        </div>
    </a>
    <a href="../project-design-showcase.php#kitchen-and-islands">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/kitchen-and-islands-images/5.webp" alt="Image 3">
            </div>
            <div class="image-text">Kitchen & Islands</div>
        </div>
    </a>
    <a href="../project-design-showcase.php#seatings">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/seatings-images/8.webp" alt="Image 3">
            </div>
            <div class="image-text">Seatings</div>
        </div>
    </a>
    <a href="../project-design-showcase.php#bars">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/bars-images/13.webp" alt="Image 3">
            </div>
            <div class="image-text">Bars</div>
        </div>
    </a>
    <a href="../project-design-showcase.php#outdoors">
        <div class="image-div">
            <div class="image-container">
                <img class="home-page-manufacturing-list-img" src="../images/outdoors-images/1.webp" alt="Image 3">
            </div>
            <div class="image-text">Outdoors</div>
        </div>
    </a>
</div>

第二页代码 #

<section class="next-and-previous-title-showcase">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="custom-nav">
                    <button class="prev-button">Previous</button>
                    <button class="next-button">Next</button>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="owl-carousel test3">
    <div id="walk-in-wardrobes"><?php include './project-design-showcase-list/walk-in-wardrobes.php';?></div>
    <div id="bedrooms"><?php include './project-design-showcase-list/bedrooms.php';?></div>
    <div id="bathroom-and-vanities"><?php include './project-design-showcase-list/bathrooms-and-vanities.php';?></div>
    <div id="kitchen-and-islands"><?php include './project-design-showcase-list/kitchen-and-islands.php';?></div>
    <div id="seatings"><?php include './project-design-showcase-list/seatings.php';?></div>
    <div id="bars"><?php include './project-design-showcase-list/bars.php';?></div>
    <div id="outdoors"><?php include './project-design-showcase-list/outdoors.php';?></div>
</div>

<script>
$(document).ready(function(){
    var owl = $('.test3').owlCarousel({
        stagePadding: 10,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1280: {
                items: 1
            }
        },
        touchDrag: false,
        mouseDrag: false
    });

    var nextButtonLabels = [
        'Bedrooms',
        'Bathroom & Vanities',
        'Kitchen & Islands',
        'Seatings',
        'Bars',
        'Outdoor',
        ''
    ];

    var prevButtonLabels = [
        '',
        'Walk-In Wardrobe',
        'Bedrooms',
        'Bathroom & Vanities',
        'Kitchen & Islands',
        'Seatings',
        'Bars'
    ];

    // Get the fragment identifier from the URL
    var fragment = window.location.hash.substring(1);

    // Map fragment identifiers to their corresponding slide indices
    var fragmentMap = {
        'walk-in-wardrobes': 0,
        'bedrooms': 1,
        'bathroom-and-vanities': 2,
        'kitchen-and-islands': 3,
        'seatings': 4,
        'bars': 5,
        'outdoors': 6
    };

    // Set the initial currentItem based on the fragment identifier
    var currentItem = 0; // Default to the first slide
    if (fragmentMap.hasOwnProperty(fragment)) {
        currentItem = fragmentMap[fragment];
    }

    // Update button labels based on the current active item index
    function updateButtonLabels() {
        $('.prev-button').text(prevButtonLabels[currentItem]);
        $('.next-button').text(nextButtonLabels[currentItem]);
    }

    // Initialize button labels based on the initial currentItem
    updateButtonLabels();

    $('.prev-button').click(function() {
        if (currentItem > 0) {
            owl.trigger('prev.owl.carousel');
            currentItem--;
            updateButtonLabels();
        }
    });

    $('.next-button').click(function() {
        if (currentItem < prevButtonLabels.length - 1) {
            owl.trigger('next.owl.carousel');
            currentItem++;
            updateButtonLabels();
        }
    });
});
</script>

问题原因 #

虽然通过URL hash设置了currentItem变量，但Owl Carousel内部的活动幻灯片索引并未同步更新。初始化后carousel默认停留在第0个幻灯片，点击prev按钮时，carousel检测到内部索引已经是0，因此不会响应prev.owl.carousel事件；点击next按钮后，carousel内部索引更新，currentItem也同步增加，之后prev按钮就能正常触发。

解决方案 #

修改第二页的JavaScript代码，让carousel初始化后跳转到目标幻灯片，同步内部状态与currentItem变量：

$(document).ready(function(){
    var owl = $('.test3').owlCarousel({
        stagePadding: 10,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1280: {
                items: 1
            }
        },
        touchDrag: false,
        mouseDrag: false,
        autoplay: false // 关闭自动播放，避免干扰手动跳转
    });

    var nextButtonLabels = [
        'Bedrooms',
        'Bathroom & Vanities',
        'Kitchen & Islands',
        'Seatings',
        'Bars',
        'Outdoor',
        ''
    ];

    var prevButtonLabels = [
        '',
        'Walk-In Wardrobe',
        'Bedrooms',
        'Bathroom & Vanities',
        'Kitchen & Islands',
        'Seatings',
        'Bars'
    ];

    var fragment = window.location.hash.substring(1);
    var fragmentMap = {
        'walk-in-wardrobes': 0,
        'bedrooms': 1,
        'bathroom-and-vanities': 2,
        'kitchen-and-islands': 3,
        'seatings': 4,
        'bars': 5,
        'outdoors': 6
    };

    var currentItem = 0;
    if (fragmentMap.hasOwnProperty(fragment)) {
        currentItem = fragmentMap[fragment];
    }

    // 让carousel跳转到目标幻灯片，同步内部状态
    owl.trigger('to.owl.carousel', [currentItem, 0, true]);

    function updateButtonLabels() {
        $('.prev-button').text(prevButtonLabels[currentItem]);
        $('.next-button').text(nextButtonLabels[currentItem]);
    }

    updateButtonLabels();

    $('.prev-button').click(function() {
        if (currentItem > 0) {
            owl.trigger('prev.owl.carousel');
            currentItem--;
            updateButtonLabels();
        }
    });

    $('.next-button').click(function() {
        if (currentItem < prevButtonLabels.length - 1) {
            owl.trigger('next.owl.carousel');
            currentItem++;
            updateButtonLabels();
        }
    });

    // 监听carousel切换事件，确保currentItem与内部状态始终同步
    owl.on('changed.owl.carousel', function(event) {
        currentItem = event.item.index;
        updateButtonLabels();
    });
});

修改说明 #

1. 添加to.owl.carousel触发：初始化后立即跳转到目标幻灯片，参数[currentItem, 0, true]中，0表示无过渡动画，true表示触发回调更新内部状态。
2. 监听changed.owl.carousel事件：确保carousel通过任何方式切换时，currentItem变量都能同步更新，避免状态不一致。
3. 新增autoplay: false：防止自动播放干扰手动定位的幻灯片位置。

修改后，从第一页跳转过来时carousel会正确定位到目标幻灯片，prev按钮也能正常响应点击。

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