0

解決できないと思われる問題が1つあります。それは、弾丸のアクティブなクラスナビゲーションを壊すことなく、1ページで複数のスライダーを使用する方法です。私は問題のqueを検索し、運がなくてグーグルで検索しました。また、Foundations Webサイト（IDに「featured1」と「featured2」を使用する）でコードを複製しようとしましたが、それでも最初の弾丸に固定されている弾丸のアクティブクラスが壊れます。次のステップが何であるかわかりません。したがって、あなたの助けを求めてください。

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

ここでは、ファンデーションとワードプレスでこの機能を実現するために書いたフックを投稿します。

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

any1がそれを必要とするならば、それがあなたのためにも働くことを願っています:)

答えてくれてありがとう。

于 2013-04-11T14:38:02.200 に答える