Question

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

Answer 1

当我只是尝试纯HTML时，它就是同样的问题

您可以尝试我为您做的工作样本，如下所示。请注意，如果您想要更改Orbit的样式，我添加了配置代码。还要注意，Foundation的初始化就在它之后。

<!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>

Answer 2

在这里，我发布了我写的钩子，以便在粉底和wordpress中使用。

https://gist.github.com/wirlen/5363881

希望它对你有用，如果有人需要它:)

感谢您的回答。

一个页面中的几个Orbit滑块，不会破坏子弹活动类

2 个答案: