Owl Carousel with Bootstrap Tabs

HTML

<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>

        </li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>

        </li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>

        </li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>

        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div class="owl-carousel" id="owl1">
                   <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>

            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <div class="owl-carousel" id="owl2">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="messages">
            <div class="owl-carousel" id="owl3">
                 <div>1</div>
  ...

CSS

#owl1 div.owl-item{
  background:red;
padding:20px 0;
}
#owl2 div.owl-item{
  background:green;
padding:20px 0;
}
#owl3 div.owl-item{
  background:red;
padding:20px 0;
}
#owl4 div.owl-item{
  background:#000;
padding:20px 0;
}

JavaScript

$(window).resize(function() {
        $(document).ready(function () {

            initialize_owl($('#owl1'));

            $('a[href="#home"]').on('shown.bs.tab', function () {
                initialize_owl($('#owl1'));
            }).on('hide.bs.tab', function () {
                destroy_owl($('#owl1'));
            });

            $('a[href="#profile"]').on('shown.bs.tab', function () {
                initialize_owl($('#owl2'));
            }).on('hide.bs.tab', function () {
                destroy_owl($('#owl2'));
            });

            $('a[href="#messages"]').on('shown.bs.tab', function () {
                initialize_owl($('#owl3'));
            }).on('hide.bs.tab', function () {
                destroy_owl($('#owl3'));
            });

            $('a[href="#settings"]').on('shown.bs.tab', function () {
                initialize_owl($('#owl4'));
            }).on('hide.bs.tab', function () {
                destroy_owl($('#owl4'));
            });
        });

        function initialize_owl(el) {
            el.owlCarousel({
                loop: true,
                margin: 10,
                navigation: false,
                responsiveRefreshRate: 50,
                navigationText: ["<i class='fa-left fa-icon'>назад</i>",
                    "<i class='fa-right fa-icon'>вперед </i>"],

                responsiveClass: true,
                items: 5,
                responsive: {
                    0: {
                        items: 1,
                        nav: true
                    },
                    768: {
                        items: 3,
                        nav: true
                    },
                    1023: {
                        items: 5,
                        nav: true

                    }
                },

            });
        }

        function destroy_owl(el) {
            el.data('owlCarousel').destroy();
        }
    });
    $(window).resize();