Owl Carousel

HTML

<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div id="project-terms"> <a id="all" class="active" href="#">ALL</a>
 <a id="cat1" href="#">CAT1</a>
 <a id="cat2" href="#">CAT2</a>
 <a id="cat3" href="#">CAT3</a>

</div>
<div id="owl-demo" class="owl-carousel">
    <div class="project cat1">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat1" alt="" />
    </div>
    <div class="project cat1">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat1" alt="" />
    </div>
    <div class="project cat1">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat1" alt="" />
    </div>
    <div class="project cat2">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat2" alt="" />
    </div>
    <div class="project cat2">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat2" alt="" />
    </div>
    <div class="project cat2">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat2" alt="" />
    </div>
    <div class="project cat3">
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&text=cat3" alt="" />
    </div>
</div>
<div id="projects-copy" class="hide"></div>

CSS

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}
#owl-demo .owl-item > div {
    padding: 0px 2px
}
.active {
 color: red;
}
.hide {
    display: none;
}

JavaScript

$(document).ready(function () {
    var options = {
        navigation: true,
        pagination: true
    };
    $("#owl-demo").owlCarousel(options);

    function showProjectsbyCat(cat) {
        var owl = $("#owl-demo").data('owlCarousel');

        owl.addItem('<div/>', 0);
        
        var nb = owl.itemsAmount;
        for (var i = 0; i < (nb - 1); i++) {
            owl.removeItem(1);
        }
        
        if (cat == 'all') {
            $('#projects-copy .project').each(function () {
                owl.addItem($(this).clone());
            });
        } else {
            $('#projects-copy .project.' + cat).each(function () {
                owl.addItem($(this).clone());
            });
        }
        owl.removeItem(0);
    }
    $('#owl-demo .project').clone().appendTo($('#projects-copy'));
    $('#project-terms a').click(function (e) {
        e.preventDefault();
        $('#project-terms a').removeClass('active');

        cat = $(this).attr('ID');
        $(this).addClass('active');
        showProjectsbyCat(cat);
    });
});