owl carousel with filter

by Osama Qassar

HTML

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

   </head>
   <body>
      <section class="recomended-pr">
         <div class="container-fluid div">
      
            <nav class="owl-filter-bar-test">
               <a href="javascript:void(0);" data-owl-filter="*">All</a>
               <a href="javascript:void(0);" data-owl-filter=".red">Red</a>
               <a href="javascript:void(0);" data-owl-filter=".blue">Blue</a>
            </nav>
      
            <div class="owl-carousel owl-carousel-test owl-theme">
               <div class="item red"><h4>1</h4></div>
               <div class="item red"><h4>2</h4></div>
               <div class="item blue"><h4>3</h4></div>
               <div class="item"><h4>4</h4></div>
               <div class="item"><h4>5</h4></div>
               <div class="item red"><h4>6</h4></div>
               <div class="item"><h4>7</h4></div>
               <div class="item"><h4>8</h4></div>
               <div class="item blue"><h4>9</h4></div>
               <div class="item"><h4>10</h4></div>
               <div class="item blue"><h4>11</h4></div>
               <div class="item"><h4>12</h4></div>
            </div>
      
         </div>
      </section>

   </body>
</html>

CSS

body{text-align:center}
.item{
  background: gray;
  display: inline-block;
  width:100%;

}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.div{
  border: 1px solid;
  overflow: hidden;
}

JavaScript

/***** owlcarousel2_filter ***/
!function(o,e){"object"==typeof exports?module.exports=e(o.jQuery):o.owlcarousel2_filter=e(o.jQuery)}(window,function(o,e){"use strict";o.fn.owlcarousel2_filter=function(o,e){var t=this.data("owl.carousel").options;this.trigger("destroy.owl.carousel"),this.oc2_filter_clone||(this.oc2_filter_clone=this.clone());var l=this.oc2_filter_clone.children(o).clone();this.empty().append(l).owlCarousel(t)}});

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

  $( '.owl-filter-bar-test' ).on( 'click', 'a', function() {
    var $item = $(this);
    var filter = $item.data( 'owl-filter' )
    owl.owlcarousel2_filter( filter );
  } )

})();