jQuery + Bootstrap + Owl Carousel 1.3.3 Filtering

by Torwan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<h1>Filtering Owl Carousel</h1>
<h5>By <a href="http://xcast3d.com">XCAST3D</a></h5>
<!--filters-->
<div id="project-terms">
    <a id="all" class="btn btn-default active" href="#">All</a>
    <a id="3d" class="btn btn-default" href="#">3D</a>
    <a id="interactive" class="btn btn-default" href="#">Interactive</a>
    <a id="websites" class="btn btn-default" href="#">Websites</a>
</div>

<!--main carousel element-->
<div id="projects-carousel" class="owl-carousel">
    <div class="project 3d">
        <h2>Project Title 1 - 3D</h2>
        Content Here
    </div> 
    <div class="project websites">
        <h2>Project Title 2 - Website</h2>
        Content Here
    </div>
    <div class="project websites 3d">
        <h2>Project Title 3 - Website</h2>
        Content Here
    </div>
    <div class="project interactive">
        <h2>Project Title 4 - Interactive</h2>
        Content Here
    </div> 
    <div class="project websites">
        <h2>Project Title 5 - Website</h2>
        Content Here
    </div>
    <div class="project interactive">
        <h2>Project Title 6 - Interactive</h2>
        Content Here
    </div>  
    <div class="project websites">
        <h2>Project Title 7 - Website</h2>
        Content Here
    </div>
    <div class="project websites">
        <h2>Project Title 8 - Website</h2>
        Content Here
    </div>  
</div>
<!--element to hold filtered out items-->
<div id="projects-hidden" class="hide"></div>

CSS

body{
  padding: 20px;
}
.hide{
  display: none;
}
.project{
  border: 1px solid #eaeaea;
  margin: 20px;
  padding: 20px;
}

JavaScript

function showProjectsbyCat( cat ){
  if ( cat == 'all'){
    $('#projects-hidden .project').each(function(){
       var owl   = $(".owl-carousel").data('owlCarousel');
       elem      = $(this).parent().html();

       owl.addItem( elem );
       $(this).parent().remove();
    });
  }else{
    $('#projects-hidden .project.'+ cat).each(function(){
       var owl   = $(".owl-carousel").data('owlCarousel');
       elem      = $(this).parent().html();

       owl.addItem( elem );
       $(this).parent().remove();
    });

    $('#projects-carousel .project:not(.project.'+ cat + ')').each(function(){
       var owl   = $(".owl-carousel").data('owlCarousel');
       targetPos = $(this).parent().index();
       elem      = $(this).parent();

       $( elem ).clone().appendTo( $('#projects-hidden') );
       owl.removeItem(targetPos);
    });
  }
}

  
    //Click event for filters
    $('#project-terms a').click(function(e){
        e.preventDefault();
        $('#project-terms a').removeClass('active');

        cat = $(this).attr('ID');
        $(this).addClass('active');
        showProjectsbyCat( cat );
        //alert('filtering'+ cat);
    });
  
   //Initialize owl carousel
    $("#projects-carousel").owlCarousel({
 
    // Most important owl features
    items : 3
    }
  );