Jquery 在一个页面中使用多个动态观察滑块，而不中断项目符号活动类_Jquery_Zurb Foundation_Orbit

Jquery 在一个页面中使用多个动态观察滑块，而不中断项目符号活动类

jquery zurb-foundation

Jquery 在一个页面中使用多个动态观察滑块，而不中断项目符号活动类,jquery,zurb-foundation,orbit,Jquery,Zurb Foundation,Orbit,我有一个问题似乎无法解决，那就是如何在一个页面中使用多个滑块而不破坏bullet活动类导航。我已经搜索了这个问题，并在谷歌上搜索了它，但没有任何运气。我还尝试复制基金会网站上的代码（在那里你使用'featured1'和'featured2'作为id。但是这仍然打破了bullets活动类，它卡在了第一个bullet上。现在我不知道下一步是什么，因此请求你的帮助当我尝试纯HTML时，也是同样的问题你可以试试我为你做的工作样本，下面给出。注意，如果你想改变轨道的样式，我添加了一个配置代码。注意基础

我有一个问题似乎无法解决，那就是如何在一个页面中使用多个滑块而不破坏bullet活动类导航。我已经搜索了这个问题，并在谷歌上搜索了它，但没有任何运气。我还尝试复制基金会网站上的代码（在那里你使用'featured1'和'featured2'作为id。但是这仍然打破了bullets活动类，它卡在了第一个bullet上。现在我不知道下一步是什么，因此请求你的帮助

当我尝试纯HTML时，也是同样的问题

你可以试试我为你做的工作样本，下面给出。注意，如果你想改变轨道的样式，我添加了一个配置代码。注意基础的初始化也在后面。

<!DOCTYPE html>
<!--[if IE 8]>               <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation Orbit Sample</title>

  <link rel="stylesheet" href="css/normalize.css" />  
  <link rel="stylesheet" href="css/foundation.css" />

  <script src="js/vendor/custom.modernizr.js"></script>    
</head>
<body>   
    <!-- Orbit test -->
    <h1>Orbit Test</h1>
    <div class="row">
        <div class="large-8 columns">
            <ul data-orbit id="slider1">
                <li><img src="http://placehold.it/800x350&text=slide 1" /><div class="orbit-caption">Slide 1</div></li>
                <li><img src="http://placehold.it/800x350&text=slide 2" /><div class="orbit-caption">Slide 2</div></li>
                <li><img src="http://placehold.it/800x350&text=slide 3" /><div class="orbit-caption">Slide 3</div></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="large-4 columns">
            <ul data-orbit id="slider2">
                <li><img src="http://placehold.it/400x150&text=slide 1" /></li>
                <li><img src="http://placehold.it/400x150&text=slide 2" /></li>
                <li><img src="http://placehold.it/400x150&text=slide 3" /></li>
            </ul>
        </div>
    </div>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>

    <script type="text/javascript">
        $(document).foundation('orbit', {
            bullets_container_class: 'your_custom_style_1',
            bullets_active_class: 'your_custom_style_2',
        });

        $(document).foundation();        
    </script>

</body>
</html>


基础轨道样本
轨道试验

幻灯片1
幻灯片2
幻灯片3






$（文档）.foundation（'轨道'{
项目符号\u容器\u类：“您的\u自定义\u样式\u 1”，
项目符号\u活动\u类：“您的\u自定义\u样式\u 2”，
});
$（document.foundation（）；
 > p>这里，我把我写的钩子贴在基础和WordPress。中。

如果有人需要，希望它也能为您工作：）
谢谢你的回答。
你能展示一下“打破子弹活动类”的屏幕截图吗？同时发布您的代码？谢谢您的回复：这是我的代码，活动类的问题是我在第一张幻灯片上卡住了。你可以看到这个截图。你在你的<代码> LI<代码>之后初始化基础吗？你有没有试过使用一个orbit，看看它是否有效？没有，我在head部分使用了它，忘了说我试图将orbit合并到wordpress中，但这并不重要，因为当我尝试纯HTML时，它确实是同一个问题。嘿，sr，回答晚了，但我已经离开了。我不能让它与你的代码，但我想问题是Wordpress，所以我最终写了一个滑块挂钩。