1

Flexsliderを使用しようとしていますが、Flexsliderを別のdivでラップして非表示にし、ボタンがクリックされたときにそのdiv全体を表示しようとしています。私はAJAX呼び出しを使用してスライダーや他のdivをロードしていませんが、代わりに（サイトが比較的単純で小さいため）、JQを使用してボタンがクリックされたときに表示したり非表示にしたりしています。

**//This is the JQuery I've tried using**
<script type="text/javascript" charset="utf-8">
$('#projectsPage').hide();
$('#projectsLink').click(function(){
$('#projectsPage').fadeIn(1000).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    slideshow: true,
    animationLoop: true,
    animationSpeed: "3000",
    slideshowSpeed: "8000",
    controlNav: false,
    directionNav: false
  });
});
});
</script>

**<!-- HTML-->**

<!--Click this link to show the div containing the flexslider-->
<a href="#projectsPage" id="projectsLink">link</a>

<!--Div containing the flexslider div (which is part of the source code)-->
<div id="projectsPage">
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="js/flexslider/images/img2.jpg" />
    </li>
    <li>
      <img src="js/flexslider/images/img3.jpg" />
    </li>
    <li>
     <img src="js/flexslider/images/img4.jpg" />
   </li>
 </ul>
</div>
</div>

このコードはより壮大なドキュメントの一部ですが、それほど複雑ではありません。誰かが私が何かを壊しているのか、それとももっと情報を含める必要があるのか​​教えてもらえますか？

また、JSコンソールにエラーがないように見えるので、なぜ表示されないのかかなり困惑しています。URLに示されているように、＃projectsPage divを「ロード」しますが、ウィンドウには何も表示されません。

私はJQueryにかなり慣れていないので、よろしくお願いします:)

ありがとう！

4

1 に答える 1

1

非表示の div 内でスライダーを初期化することはできません。

サムネイルがクリックされたときにのみ表示されるdivで複数のflexsliderを非表示にするという同じ問題がありました。これを機能させるには、スライダーを表示する要素に jquery click() リスナーを設定し、含まれる div の非表示が解除された後にスライダーを初期化します。

次のようなもの：

$('.show_slider_link_class').click( function(){

    //show containing element
    $('.hidden_slider_container').show();

            // now you can init the flexslider
    $('.flexslider_').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        minItems: 1,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
});
于 2013-07-09T06:32:59.760 に答える