Skip to content
Advertisement

Fixing greyed-out .owl-carousel div

I’m making a call to get a page (getresult.php) through AJAX.

The ID div in my index:

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

My footer:

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

The script for calling getresult in the footer:

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

Now this is my page 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>

My problem is the carousel class doesn’t work. When I remove the class owl-carousel, I can see the pic. I have the CSS and the JS owl-carousel in my index.php. When I see the HTML in Firebug, I see the line <div class="owl-carousel" data-plugin-options='{"items":1}'> greyed out.

Advertisement

Answer

Finaly i found it.

I forget to put this in my 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>
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement