修复灰显的 .owl-carousel div答案

【问题标题】：Fixing greyed-out .owl-carousel div修复灰显的 .owl-carousel div
【发布时间】：2015-05-30 00:43:20
【问题描述】：

我正在打电话以通过 AJAX 获取页面 (getresult.php)。

我的索引中的 ID div：

<div id="pagination">
  <input type="hidden" name="rowcount" id="rowcount" />
</div>

我的页脚：

<script>
  getresult("getresult.php");
</script>

在footer中调用getresult的脚本：

<script>
  function getresult(url) {
    $.ajax({
      url: url,
      type: "GET",
      data: {
        rowcount: $("#rowcount").val()
      },
      success: function(data) {
        $("#pagination").html(data);
      },
      error: function() {}
    });
  }
</script>

现在这是我的页面getresult：

<div class="blog-posts">
  <article class="post post-medium">
    <div class="row">
      <div class="col-md-5">
        <div class="post-image">
          <div class="owl-carousel" data-plugin-options='{"items":1}'>
            <div>
              <div class="img-thumbnail">
                <img class="img-responsive" src="./img/blog/blog-image-2.jpg" alt="">
              </div>
            </div>
            <div>
              <div class="img-thumbnail">
                <img class="img-responsive" src="./img/blog/blog-image-1.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="post-content">
          <h2><a href="blog-post.html">Class aptent taciti sociosqu ad litora torquent</a></h2>
          <p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus consequat nisl, eu ornare mauris tincidunt vitae. [...]</p>
        </div>
      </div>
    </div>
  </article>
</div>

我的问题是轮播类不起作用。当我删除类owl-carousel 时，我可以看到图片。我的 index.php 中有 CSS 和 JS owl-carousel。当我在 Firebug 中看到 HTML 时，我看到了这一行 <div class="owl-carousel" data-plugin-options='{"items":1}'> 显示为灰色。

【问题讨论】：

标签： javascript jquery html options owl-carousel

【解决方案1】：

我终于找到了。

我忘了把它放在我的 getresult.php 中

<script>
    $(document).ready(function() {

      $(".owl-carousel").owlCarousel({

          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem:true

          // "singleItem:true" is a shortcut for:
          // items : 1, 
          // itemsDesktop : false,
          // itemsDesktopSmall : false,
          // itemsTablet: false,
          // itemsMobile : false

      });

    });

    </script>

【讨论】：