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 控制台中似乎没有错误，所以我很困惑为什么它不会显示。它“加载”#projectsPage div，如 URL 中所示，但随后在窗口中不显示任何内容。

我对 JQuery 很陌生，所以很好:)

谢谢！

4

1 回答 1

1

滑块无法在隐藏的 div 内初始化。

我在 div 中隐藏多个 flexslider 时遇到了同样的问题，这些 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 回答