How to reinitialize Owl Carousel after an ajax call?

Question

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

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax call

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

Am I missing something that I need to do? I have looked at this issue on the github page and tried the suggestions but to no avail.

Edit

From the advice given, I have created these two functions

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

It seems to work, but wondering if this is the correct way to be doing this?

Here's the Owl Carousel page that might help - http://owlgraphic.com/owlcarousel/demos/manipulations.html Have you tried using addItem() or reinit() — Mathias Rechtzigel, Jan 06 '15 at 15:50
thanks for the link..trying to put something together using their examples, but not working so far — Richlewis, Jan 06 '15 at 16:00

Eduardo · Answer 1 · 2016-12-17T11:45:26.580

7

The example below works.

Initializing the carousel:

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

And when you use the ajax callback, try:

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

I create a fiddle to explain you how to re-initialize the carousel: http://jsfiddle.net/s10bgckL/959/

PS: I did not create an array of options just if you want to modify some parameters as speed, quantity of displayed items, etc.

I hope it helps.

edited Dec 17 '16 at 11:45

answered Dec 17 '16 at 11:39

Eduardo

508
6
18

Works for me like charm!! – Abhishek Chaurasia Mar 15 '17 at 10:54

score 1 · Answer 2 · answered Jun 21 '20 at 14:00

1

This one works for me in version 2

var owl = $('#owl-carousel');
owl.trigger('destroy.owl.carousel');
owl.owlCarousel({
   items: 1,
});

answered Jun 21 '20 at 14:00

Mark Joseph M. Pino

138
2
10

score 0 · Answer 3 · answered Jan 06 '15 at 16:13

0

This should help:

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})

answered Jan 06 '15 at 16:13

Chris

453
3
15

thanks, forgive me for being dumb here but if i wanted to create a function that gets run within the ajax success callback how would i construct that? as i cant really see how the above is working. – Richlewis Jan 06 '15 at 18:04
think i got it, will post my example up – Richlewis Jan 06 '15 at 18:13

score 0 · Answer 4 · edited Apr 11 '18 at 05:26

0

Try it , its exist in owl documention :

//Initialize Plugin
    $(".owl-carousel").owlCarousel()

    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');

    owl.reinit(options)

edited Apr 11 '18 at 05:26

Rob

26,989
16
82
98

answered Sep 18 '16 at 06:53

Govind Samrow

9,981
13
53
90

score 0 · Answer 5 · answered Apr 11 '18 at 05:40

I went through the same problem and tried reinit() method but it was not working for me, so I tried destroy and init again and it worked.

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});

score 0 · Answer 6 · answered Jan 14 '23 at 22:53

Check out this:

$.ajax({
            
            type: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'html',
            data: {
              category: catName,
            },    
            success: function(response) {
                    
                    $('.show_best_top_popular').html(response);
                    
                    var owl = $('.owl-carousal');
                    
                    owl.trigger('destroy.owl.carousel');
                    
                    owl.owlCarousel({
                        loop: true,
                        margin: 10,
                        nav: true,
                    });
                }
});

After lots of try, I did it. Thanks.

score -2 · Answer 7 · edited Jul 18 '16 at 11:30

-2

Try $(window).load() instead of reinitialize

edited Jul 18 '16 at 11:30

Sergey Kudriavtsev

10,328
4
43
68

answered Jul 08 '16 at 12:00

Gopala raja naika

17
3

This could have ripple effects outside of just owl-carousel - many things listen for load that may not be aware of this narrow ajax call. Not wrong, just a huge sledgehammer. – allicarn Jul 12 '17 at 17:37

score -3 · Answer 8 · edited Jul 18 '16 at 10:32

-3

$('#owl-demo').data('owlCarousel').reinit();

edited Jul 18 '16 at 10:32

HiDeoo

10,353
8
47
47

answered Jul 18 '16 at 10:11

venkat

73
2
14

Mr. HiDeo this code works for me in my owl-carousel to re initialize . is there some code to reinitiate .. – venkat Jul 19 '16 at 06:44
I am getting this error Uncaught TypeError: Cannot read property 'reinit' of undefined – mayur panchal Jun 21 '17 at 08:14

How to reinitialize Owl Carousel after an ajax call?

Edit

8 Answers8

Linked