0

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

4

2 回答 2

0

当我尝试纯 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>
于 2013-03-28T01:04:55.497 回答
0

在这里，我发布了我写的钩子，以便在基础和 wordpress 中进行这项工作。

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

如果有任何需要它，希望它也对你有用:)

感谢你的回答。

于 2013-04-11T14:38:02.200 回答