CODEWITHSUNDEEP
jqueryhtmlowl-carousel
bcools
bcools

Reputation: 43

owl carousel items are not working when appended dynamically using ajax,jquery

owl carousel items are not working when appended dynamically using ajax,jquery below is my ajax code..any help will be really appreciated..

Thanks in advance 

 $.ajax({
                type: "POST",
                url: "urllinks",
                data: 'id='+id,
                dataType: 'json',
                cache: false,
                success: function(data) {
                var locationoffers='';
                locationoffers+='<div id="owl-demo" class="owl-carousel">';
                $.each(data, function(i, item) {
                    locationoffers+='<div class="item"><a href="#" class="thumbnail"><img src="<?php echo base_url(); ?>assets/uploads/location_offers/'+data[i].image+'"  alt="Location Logo" /></a><span class="tocenter"> <h3>'+data[i].tittle+'</h3></span></div><div class="desc"><span> <p>'+data[i].message+'</p> </span></div><br><div class="tocenter"><a href="http://www.google.com" target="_blank" class="btn green">Grabit</a></div> </div>';
                });

            locationoffers+='</div>';

               $('#display_adds').html(locationoffers);
              $('.owl-carousel').owlCarousel();


        }


   });

     }

This is the error output iam getting

Upvotes: 2

Views: 3056

Answers (2)

Karan
Karan

Reputation: 319

In addition to the above answer, try using owlCarousel properties to control the behaviour as:

$('.searchPageGallery').owlCarousel({
        margin:0,
        nav:true,
        loop:true,
        stagePadding:0,
        center:true,
        dots:false,
        lazyLoad:true,
        items:1,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true,
                dots:false
            },
            1025:{
                items:1,
                nav:true,
                dots:false
            },
            1200:{
                items:1,
                nav:true,
                nav:true
            }
        }
    });

Upvotes: 0

Raf
Raf

Reputation: 352

when you display owl carousel after ajax call you need to initialize it after receiving the response so try putting the carousel inside the function

  function init_carousel() {
     $('.owl-carousel').owlCarousel();
  };

and call the function when the ajax response is successfull to refresh the carousel. And also for it to initialize on page load jus call the function in:

jQuery(document).ready(function() {
   init_carousel();
});

Upvotes: 3

Related Questions