use keyboard arrows to navigate

Bootstrap + Owl Carousel + Filter

Owl Carousel is a great plugin for implementing nice responsive carousels. It’s very lightweight, easy to install and has some powerful features for the more custom/advanced uses. The ability to “touch/grab” is a nice bonus that feels natural not only on touch devices but desktops as well. While it’s easier to use the default carousel that comes with Bootstrap, it’s those details plus important features like methods to remove items, add items and reinitialize that make this plugin awesome.

However, one thing that is missing is the ability to filter your items by categories. Obviously, this is a custom feature but if you are interested in categorizing the items in your Owl Carousel, this is how I did it.

First, we setup Owl Carousel and add our necessary classes to the items. If you need help setting up Owl, visit their installation guide, its fairly simple. Once the carousel is working, add some css to the items. In my case, I used “project” as my base class and a class for each category, ie: “3d”, “websites”, etc.

<div id="projects-carousel" class="owl-carousel">
    <div class="project 3d">
        <h2>Project Title</h2>
        Content Here
    </div>
    
    <div class="project websites">
        <h2>Project Title</h2>
        Content Here
    </div>
</div>

Then, we add a container to hold the items that are filtered out. I added this just above the carousel. We could have also created this element into the DOM using Javascript but, well, it was late and I just wanted to wrap this up.

<div id="projects-hidden" class="hide"></div>

Finally, we add our code to our JS file. Simply put, the function moves items not in the selected category to a hidden div (#projects-hidden) and moves back as needed.

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);
    });
  }
}

Now, to use, simply call our function and pass the category to show. In my case, I created some filtering links and bound them to our function:

<!--IN HTML-->
<div id="project-terms">
    <a id="all" class="active" href="#"></a>
    <a id="3d" href="#"></a>
    <a id="drawings" href="#"></a>
    <a id="flash" href="#"></a>
    <a id="websites" href="#"></a>
</div>

// IN JAVASCRIPT
$(window).load(function(){
    $('#project-terms a').click(function(e){
        e.preventDefault();
        $('#project-terms a').removeClass('active');

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

        //Don't forget to iniatilize Owl Carousel
        var owl = $("#projects-carousel").data('owlCarousel');
    });
});

Here is a working codepen using jQuery + Bootstrap and Owl Carousel 1.3.3.
https://codepen.io/xcast3d/pen/BJMXwq
Note: This doesn’t work for Owl Carousel 2. I may build a codePen for that version when I get some free time.