owlCarousel destroy and rebuild jQuery

Something Like that:
$('.owl-carousel').owlCarousel();

First we will make normal owlCarousel

For that you need to create first html code.

HTML

<div class="owl-carousel owl-theme owl-tanants client_list_sec">
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>Lorem Ipsum is simply dummy text of the printing and</li>
    </ul>
  </div>
</div>

After that add this CSS Library from owlCarousel.
/*Not necessary use.
https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css
/*Must be Use.
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css

Now
Use jQuery Library.
and this
https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js

After that add this JQuery code.

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items:5
})

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZJqZgX” default_tab=”html,result” user=”pradeepanvi”]See the Pen owlCarousel jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Something is wrong in responsive view 5 items is showing every time.
For that we will use Responsive Code.

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”brmyaW” default_tab=”html,result” user=”pradeepanvi”]See the Pen owlCarousel responsive jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Now Try to destroy owlCarousel.
Just Use One line code below owlCarousel code.

JS

$('.owl-tanants').owlCarousel('destroy');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MvPdgv” default_tab=”html,result” user=”pradeepanvi”]See the Pen owlCarousel Destroy jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see nothing

But If you see from top there is one li code in each ul code, But now I want to 2 li code in each ul, for that use this code.

JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})


$('.owl-tanants').owlCarousel('destroy');
$(".client_list_sec .item ul li").unwrap();
$(".client_list_sec .item li").unwrap();
//wrap every 2 li in ul
var ul = $(".client_list_sec li");
for(var i=0; i');
}
$(".client_list_sec ul").wrap('
');
$('.owl-tanants').owlCarousel({
	rtl:true,
    loop:true,
	touchDrag:true,
	autoplay:false,
    autoplayTimeout:2000,
	nav:true,
	items:1
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”prOrzy” default_tab=”js,result” user=”pradeepanvi”]See the Pen owlCarousel Destroy and rebuild jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see