如何在显示元素后启动图像滑块

我目前有一个问题，我的flexslider图像库正在初始化页面加载和中断功能。这是因为flexslider包含在折叠的jquery移动选项卡中，该选项卡设置为display: none。如何在显示元素后启动图像滑块

保存可折叠内容的实际div在jquery移动脚本中生成，并且不能在前端附加自定义ID。我插入了一个设置为display:none的额外容器，以便在元素可见后我可以初始化滑块。

这是我现在有和没有工作的代码：

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#first_tab').click(function(){ 

     $('#slider_contents').css('display', 'block'){ 
    }); 
}); 

    if ($('#slider_contents').is(':visible')) { 

      $('.flexslider').flexslider({ 
       animation: "slide", 
      controlsContainer: ".flex-container" 

      }); 

     } else {} 
    }); 
</script>

HTML标记：

<div data-role="collapsible" id="first_tab"> 
      <h3>WORK</h3> 
      <div id="slider_contents"> 
       <div class="flex-container"> 
        <div class="flexslider"> 
        <ul class="slides"> 
         <li> 
          <img src="img/inacup_samoa.jpg" /> 
          <p class="flex-caption">Captions and cupcakes. Winning combination.</p> 
         </li> 
         <li> 
          <a href="#"><img src="img/inacup_pumpkin.jpg" /></a> 
          <p class="flex-caption">This image is wrapped in a link!</p> 
         </li> 
         <li> 
          <img src="img/inacup_donut.jpg" /> 
         </li> 
         <li> 
          <img src="img/inacup_vanilla.jpg" /> 
         </li> 
        </ul> 
        </div> 
       </div> 
</div>

CSS样式：

#slider_contents{ 
    max-width: 620px; 
    margin: 0 auto; 
    display: none; 
    } 

     .flexslider {width: 100%; margin: 0; padding: 0;} 
     .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded.  Avoids image jumping */ 
     .flexslider .slides img {max-width: 100%; display: block;} 
     .flex-pauseplay span {text-transform: capitalize;}

任何援助将大大赞赏。我尝试了很多不同的东西，似乎没有任何工作。

感谢

来源

2011-12-01 Andrew

你DOM加载后添加#first_tab或#slider_contents？ –

不完全确定。我是JS和jQuery的新手，所以我还没有完全理解DOM事件和加载的顺序。我怎么知道？ – Andrew

你不需要的{在这里

$('#slider_contents').css('display', 'block'){

结束还有if语句是.ready函数外

试试这个

<script type="text/javascript"> 

    $(document).ready(function(){ 

    $('#first_tab').click(function(){ 

     $('#slider_contents').css('display', 'block'); 

    }); 

    if ($('#slider_contents').is(':visible')) { 

     $('.flexslider').flexslider({ 
      animation: "slide", 
     controlsContainer: ".flex-container" 

     }); 

    } else {} 

    }); 


</script>

来源

2011-12-01 17:28:56

如何在显示元素后启动图像滑块

回答

相关问题