Bootstrap Carousel 从外部链接转到幻灯片

Posted 2023-05-09

【中文标题】Bootstrap Carousel 从外部链接转到幻灯片

【英文标题】：Bootstrap Carousel Goto Slide From External Link

【发布时间】：2015-10-15 10:26:49

【问题描述】：

问题

我试图通过在外部链接中使用哈希来触发在引导轮播中滑动，但我的函数没有执行任何操作。

我的尝试

我的 goToSlide 功能在页面内完美运行，我可以使用该功能转到每张幻灯片。我认为这是由于轮播未初始化，所以我尝试了 jQuery document.ready 和 jQuery.when 的几种排列，以确保我的轮播已经初始化。

我还尝试了使用轮播 id 而不是类的 jQuery.when。 我还尝试使用较旧的 window.onload 来确保页面已加载。 我已经排除了轮播索引的“必须是整数”，因为我正在检测文本哈希并用整数触发函数。如果您阅读“此代码的作用”部分，则哈希检测会起作用。

我的网址

http://www.website.com/#business

我的代码

jQuery(document).ready( function() 
    jQuery.when(jQuery('.carousel').carousel( interval: false )).done( function() 
        if(window.location.hash) 
              var home_section = window.location.hash.substring(1);
            console.log(home_section);
            if (home_section == "auto")  goToSlide(0); console.log("went to auto"); 
            if (home_section == "home")  goToSlide(1); console.log("went to home");  
            if (home_section == "business")  goToSlide(2); console.log("went to business");
          
    );
);
function goToSlide(number) 
   jQuery("#carousel-homebanner").carousel(number);

此代码的作用

我的哈希被检测到，因为我可以看到我的 console.log 输出上面的文本，但在 goToSlide 函数应该触发的同一代码块中。我没有收到任何错误，所以我假设它会触发。

问题

如何使带有哈希的外部链接使我的轮播滑动到正确的幻灯片？

编辑我的其他代码也不起作用

window.onload = function ()  
jQuery.when(jQuery('#carousel-homebanner').carousel( interval: false )).done( function() 
        if(window.location.hash) 
              var home_section = window.location.hash.substring(1);
            console.log(home_section);
            if (home_section == "auto")  goToSlide(0); console.log("went to auto"); 
            if (home_section == "home")  goToSlide(1); console.log("went to home");  
            if (home_section == "business")  goToSlide(2); console.log("went to business");
          
    );

【问题讨论】：

我看到你必须为你的轮播（.carousel 和#carousel-homebanner）选择是因为你有 2 个滑块（在这种情况下你会在 carousel1 初始化时触发 carousel2）或者它只是错误继承自复制过去？

在这种情况下，页面上有2个轮播。我是通过类 .carousel 来启动它们的，我也尝试过用它们各自的 id 分别启动它们。我的目标是检测轮播初始化，然后检查哈希并运行 goto 幻灯片功能。我只想用哈希链接触发其中一个轮播，而不是另一个。

我刚刚用我的其他代码编辑了这个问题。

如果你在函数 goToSlide() 中放了一个 console.log，你有输出吗？

刚刚测试过，输出成功。如果您想查看实际页面，我可以在 SO 之外与您联系并给您链接。

【参考方案1】：

这里的解决方案是我的代码示例实际上是有效的。我的失败结果是基于未突出显示的导航链接状态。

触发器实际上正在发生并且没有错误，因此每个示例都可以正常运行。

感谢Dfayet 的第二双眼睛。