How to reinitialize Owl Carousel after ajax call?

owl carousel refresh
owl carousel callback function
owl carousel data target
owl carousel active event
owl carousel on scroll
owl carousel set active slide
owl carousel direction
owl carousel rewind

I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.

Ajax Request

 $(document).on('click', '.category_list', function() {
    var category_id = $(this).attr('data-id');
    var _token = $('#_token').val();
    var param = 'category_id=' + category_id + '&_token=' + _token;
    $.ajax({
        type: "POST",
        datatype: "json",
        url: "/master/sub_category",
        data: param,
        success: function(result) {
            $('#test').html(result);
            var owl = $(".owl-carousel");
            owl.owlCarousel({
                items: 4,
                navigation: true
            });
        }
    });    
});

Controller Function

public function getImg() {
    $post_data = Request::all();
    $sub_img = $this->imgModel->getImgList($post_data);
    $sub_img_html = '';
    foreach ($sub_img ['data'] as $data_img ) {
        $img = '/img/sub_category/'.$data_img ['img'];            
        $sub_img_html .= '<div class="item">';
        $sub_img_html .= '<img src="'.$img.'" />';
        $sub_img_html .= '</div>';
    }
    echo $sub_img_html;
}

View

<div id="demo">
    <div id="test" class="owl-carousel">
        <?php
           if (!empty($img_category)) {
              foreach ($img_category as $imgcategory){
        ?>
        <div class="item">
          <img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
      <?php
           }
        }
     ?>
  </div>
</div>

As per your code I make changes please apply this I hope this code work full.

success: function(result) {            
            $('#demo').html('<div id="testing" class="owl-carousel"></div>');
            for(var i=0;i<result.length;i++){
                $(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
            };
            var owl = $("#testing");
            owl.owlCarousel({
                items: 4,
                navigation: true
            });

How to reinitialize Owl Carousel after an ajax call?, The example below works. Initializing the carousel: owl = $("#owl-demo"); owl.​owlCarousel({ items: 10, autoPlay: 1000, });. And when you use the ajax callback,​  I am trying to reinitialize Owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view (the carousel structure) will not reinitialize. Everything is fine upon page load. I'm using version 1.3.3

I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391

or there is a refresh method;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608

or there is an update method;

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569

I believe these can all be called;

$('.owl-gallery').owlCarousel('refresh');

Might be worth a try.

javascript How to reinitialize Owl Carousel after ajax call?, javascript How to reinitialize Owl Carousel after ajax call? /* reinit() method reinitialize plugin Syntax: owldata.reinit(newOptions) Yes! you can reinit plugin with  How to reinitialize Owl Carousel after ajax call I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view (the carousel structure) will not reinitialize.Everything is fine upon page load.

This was my approach and it works with the version 2.2.1 :

$.getJSON('testimonials.json', function(data) {

    var content = "";
        for(var i in data["items"]){

             var text = data["items"][i].text;
             var name = data["items"][i].name;
             var position = data["items"][i].position;

             content += text + name + position
        }

        // set the content inside the element
        $("#test_slider").html(content);

        // Now we can call the owlCarousel
        $('#test_slider').owlCarousel({
            dots: false,
            nav: true,
            loop: true,
            margin:30,
            smartSpeed: 700,
            items:1,
            autoplay:true,
        });
});

As for testimonials.json looks like this :

{
  "items" :
  [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmansss",
      "position": "CEO of ABS Ltd.1"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmanggg",
      "position": "CEO of ABS Ltd.2"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmannnn",
      "position": "CEO of ABS Ltd3."
    }
  ]
}

javascript - How to reinitialize Owl Carousel after ajax call?, owl = $("#owl-demo"); owl.owlCarousel({ items: 10, autoPlay: 1000, });. And when you use the ajax callback, try: owl.data('owlCarousel').destroy(); owl. I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view (the carousel structure) will not reinitialize.Everything is fine upon page load. im using version 1.3.3

Nothing above worked for me only this worked :

$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);

How to reinitialize Owl Carousel after ajax call?, I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue  I am trying to reinitialize Owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view (the carousel structure) will not reinitialize. Everything is fine upon page load. I'm using version 1.3.3

reinitialize owl carousel · Issue #1861 · OwlCarousel2 , I execute this after ajax $("#partial").data('owlCarousel').reinit(); but didn't work. In version 1.3.3 everything work but in new version this code  You click on the menu item in the carousel and ajax call retrieves the wanted door and colors, colors should be other menu but no need for carousel. If you need 3 carousels then make a different calls to carousel script by putting different classes for each carousel - see if this helps.

How to reinitialize Owl Carousel after ajax call, I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Events | Owl Carousel, I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue  Definition and Usage. The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.

Comments
  • I used $('.owl-gallery').owlCarousel('refresh'); but still owlCarousel not working.
  • I added this way success: function(result) { $('#demo').html(result); $('.owl-gallery').owlCarousel('refresh');} is this correct way
  • Sorry to clarify, you will need to change 'refresh' to 'destroy' or 'update'. I just meant thats how you call the method.
  • destroy and refresh couple worked well for me, but it reinitialized slider with default options. Isn't there any way to define options with $('.owl-gallery').owlCarousel('refresh')