修复灰色猫头鹰旋转木马

Fixing greyed-out .owl-carousel div

本文关键字:旋转木马 猫头鹰 灰色      更新时间:2023-09-26

我正在调用AJAX获取页面(getresult.php(。

我的索引中的IDdiv:

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

我的页脚:

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

在页脚中调用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旋转木马<div class="owl-carousel" data-plugin-options='{"items":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>