I want to switch between a carousel view and a different layout depending on the width of the viewport. Setting up the carousel works fine. I run into problems when I want to remove it.

I use $owlTeam.destroy(); which according to the documentation should recreate the state of the markup before the carousel was initialized, but for some reason removes two unexpected and crucial divs. One is a wrapper div that is a parent of the div containing the carousel the other is the carousel div itself.

This is my markup:

<section id="some-id" class="team">
  <div class="wrapper"> <!-- this gets removed on destroy -->
    <header><!-- content --></header>
    <div class="owlCarousel"> <!-- and this gets removed on destroy -->
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="small"><!-- content --></article>
      <article class="small"><!-- content --></article>
      <!-- and some more articles -->
    </div>
  </div>
</section>

This is the JS I use:

var $owlTeam;
if( $window.width() < 680 ) {
    $('.team .owlCarousel').owlCarousel({
        autoPlay: false
        , singleItem:true
        , transitionStyle : "fade"
        , pagination : true
    });
    $owlTeam = $('.team .owlCarousel').data('owlCarousel');
}

$window.resize(function() {
    if( $window.width() < 680 ) {
        $('.team .owlCarousel').owlCarousel({
            autoPlay: false
            , singleItem:true
            , transitionStyle : "fade"
            , pagination : true
        });
        $owlTeam = $('.team .owlCarousel').data('owlCarousel');
    } else {
        if( typeof $owlTeam != 'undefined' ) {
            $owlTeam.destroy();
        }
    }
});

I tried using an ID to directly select the div that's supposed to contain the carousel but this didn't change the behaviour at all. I could reinsert the missing markup with JS but that seems to be more of a bandaid than a proper solution.

What is causing this behaviour and how can I fix it?

jQuery Version: 1.11.1 owl Version: 1.3.2 Browsers I tested: FF 35, Chrome 40

I want to switch between a carousel view and a different layout depending on the width of the viewport. Setting up the carousel works fine. I run into problems when I want to remove it.

I use $owlTeam.destroy(); which according to the documentation should recreate the state of the markup before the carousel was initialized, but for some reason removes two unexpected and crucial divs. One is a wrapper div that is a parent of the div containing the carousel the other is the carousel div itself.

This is my markup:

<section id="some-id" class="team">
  <div class="wrapper"> <!-- this gets removed on destroy -->
    <header><!-- content --></header>
    <div class="owlCarousel"> <!-- and this gets removed on destroy -->
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="small"><!-- content --></article>
      <article class="small"><!-- content --></article>
      <!-- and some more articles -->
    </div>
  </div>
</section>

This is the JS I use:

var $owlTeam;
if( $window.width() < 680 ) {
    $('.team .owlCarousel').owlCarousel({
        autoPlay: false
        , singleItem:true
        , transitionStyle : "fade"
        , pagination : true
    });
    $owlTeam = $('.team .owlCarousel').data('owlCarousel');
}

$window.resize(function() {
    if( $window.width() < 680 ) {
        $('.team .owlCarousel').owlCarousel({
            autoPlay: false
            , singleItem:true
            , transitionStyle : "fade"
            , pagination : true
        });
        $owlTeam = $('.team .owlCarousel').data('owlCarousel');
    } else {
        if( typeof $owlTeam != 'undefined' ) {
            $owlTeam.destroy();
        }
    }
});

I tried using an ID to directly select the div that's supposed to contain the carousel but this didn't change the behaviour at all. I could reinsert the missing markup with JS but that seems to be more of a bandaid than a proper solution.

What is causing this behaviour and how can I fix it?

jQuery Version: 1.11.1 owl Version: 1.3.2 Browsers I tested: FF 35, Chrome 40

• javascript
• jquery
• owl-carousel

Share Follow asked Feb 6, 2015 at 15:42 SeraphithanSeraphithan 41911 gold badge55 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This is a reported bug: https://github./smashingboxes/OwlCarousel2/issues/460

Anyway you could try this to destroy the owl carousel:

$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();