Question

我目前遇到的问题是我的flexslider图片库在页面加载时初始化并破坏了功能。这是因为flexslider包含在设置为display: none的折叠jquery移动选项卡中。

保存可折叠内容的实际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;}

非常感谢任何帮助。我尝试过很多不同的东西，似乎没什么用。

由于

Answer 1

你有一个不受欢迎的{在这里

$('#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>

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

1 个答案: