1

ギャラリーページの作成に問題があります。私はBootstrapをベースとして使用しています。私はさまざまなスライダーとカルーセルを検討し、Flexslider2 を選択しました。これは機能も見た目も優れており、単一のスライダーとしても優れた機能を発揮します。

ただし、ギャラリーページの各タブに 1 つずつ、4 つの Flexslider を使用したいと考えています。わかりましたので、4 ページにすることもできますが、1 ページだけにしたほうが見栄えがよくなります。

私は Javascript を初めて使用しますが、html は知っています (ただし DOM は知りません)。以下の私の例は、簡単にするために 2 つの Flexslider のセットアップです。

私のページが最初のFlexsliderを起動すると問題ありませんが、タブを切り替えると2番目のタブが表示されず、エラーはありませんが、2番目のFlexsliderが初期化されたときに画面にアラートを表示すると表示されます。これは DOM の問題を指していますが、解決策が見つからないようです。

HTML;

<div class="row-fluid">
<div class="span9"> 
  <section id="tabs">
    <div class="bs-docs-example">
        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>this is tab1 (0)</p>
            <section class="slider">
              <div id="slider1" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                </ul>
              </div>
              <div id="carousel1" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                </ul>
              </div>
            </section>
          </div>
          <div class="tab-pane" id="profile">
            <p>this is tab2 (1)</p>
            <section class="slider">
              <div id="slider2" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                </ul>
              </div>
              <div id="carousel2" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                </ul>
              </div>
            </section>
          </div>
        </div>
    </div>
    <hr class="bs-docs-separator">
  </section>
</div>
</div>

そしてJavaScriptは次のとおりです。

<script type="text/javascript">
    $('#myTab a').click(function (e) {
    e.preventDefault();
    alert("just about to call initflex");
    initflexsliders();
    $(this).tab('show');
})  
</script> 

<script type="text/javascript">
   $(window).load(function(){
       initflexsliders();   
}); 
</script> 

<script type="text/javascript">
function initflexsliders(){
          $('#carousel1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider1'
          });

          $('#slider1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel1",
          });
          $('#carousel2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider2'
          });

          $('#slider2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel2",
          });
       }
</script>

誰かアイデアはありますか？簡単なことだと思いますが、髪の毛を引っ張ってしまいましたか？

4

4 に答える 4

0

私には1つの解決策があります。

に行ってください

https://github.com/liangrongze/flexslider-compatible-bootstrap-tab

flexslider ファイルをダウンロードして、古い js ファイルを置き換えます。

それは私のプロジェクトで動作します。

于 2015-04-26T14:03:17.987 に答える