Bootstrap Carousel Goto从外部链接滑动

时间:2015-07-24 16:45:52

标签: jquery twitter-bootstrap carousel

问题

我试图通过在外部链接中使用哈希来触发在Bootstrap Carousel中滑动,但我的功能没有做任何事情。

我尝试了什么

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

我还尝试了jQuery.when与carousel id而不是类。 我也尝试使用旧的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");}
          }
    });

}

1 个答案:

答案 0 :(得分:0)

这里的解决方案是我的代码示例实际上正在运行。我将失败的结果基于导航链接的状态,这些状态未被突出显示。

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

感谢Dfayet第二双眼睛。