轮播组件：跨页面链接幻灯片——URL哈希导航失效原因排查

你的问题核心是两次初始化了同一个.sidetext-carousel轮播实例，后执行的脚本会覆盖前一个的配置，导致哈希导航功能失效。以下是两种可行的解决方法：

方案一：合并配置到主脚本（推荐） #

直接修改owl.carousel_main.js中的轮播初始化代码，把哈希导航相关配置整合进去，只保留一次初始化操作：

(function($) {
    "use strict";
    var fullHeight = function() {
        $('.js-fullheight').css('height', $(window).height());
        $(window).resize(function(){
            $('.js-fullheight').css('height', $(window).height());
        });
    };
    fullHeight();

var carousel = function() {
    $('.sidetext-carousel').owlCarousel({
        loop: false, // 哈希导航需关闭循环，避免定位异常
        autoplay: false,
        margin:30,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn', 
        nav:true,
        dots: true,
        autoplayHoverPause: false,
        items: 1,
        navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
        // 新增哈希导航配置
        URLhashListener:true,
        startPosition: 'URLHash',
        responsive:{
          0:{
            items:1
          },
          600:{
            items:1
          },
          1000:{
            items:1
          }
    }
    });
};
carousel();
})(jQuery);

方案二：销毁原有实例后重新初始化 #

如果不想修改主脚本，可在主脚本加载完成后，先销毁已存在的轮播实例，再初始化带哈希导航的配置：

$(document).ready(function() {
    // 销毁已初始化的轮播实例
    $('.sidetext-carousel').trigger('destroy.owl.carousel');
    // 重新初始化，按需保留主脚本中的动画、导航等配置
    $('.sidetext-carousel').owlCarousel({
        items: 1, 
        loop: false, 
        center:true, 
        margin:30, 
        URLhashListener:true,
        startPosition: 'URLHash',
        animateOut: 'fadeOut',
        animateIn: 'fadeIn', 
        nav:true,
        dots: true,
        navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"]
    });
})

注意：此脚本必须放在owl.carousel_main.js的加载标签之后，确保执行顺序正确。

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