OWL accordion

by Yunus Gaziev

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.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">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<section id="demos">
          <div class="owl-carousel">
            <div class="item">
              <h4>1</h4>
            </div>
            <div class="item">
              <h4>2</h4>
            </div>
            <div class="item">
              <h4>3</h4>
            </div>
            <div class="item">
              <h4>4</h4>
            </div>
            <div class="item">
              <h4>5</h4>
            </div>
            <div class="item">
              <h4>6</h4>
            </div>
            <div class="item">
              <h4>7</h4>
            </div>
            <div class="item">
              <h4>8</h4>
            </div>
            <div class="item">
              <h4>9</h4>
            </div>
            <div class="item">
              <h4>10</h4>
            </div>
            <div class="item">
              <h4>11</h4>
            </div>
            <div class="item">
              <h4>12</h4>
            </div>
          </div>
</section>

CSS

#demos {
    width     : 96%;
    max-width : 760px;
    margin    : 24px auto;
}

.owl-shadow-left {
    -webkit-box-shadow: -3px 0 6px -2px rgba(0,0,0,0.5);
       -moz-box-shadow: -3px 0 6px -2px rgba(0,0,0,0.5);
            box-shadow: -3px 0 6px -2px rgba(0,0,0,0.5);
}

.owl-shadow-right {
    -webkit-box-shadow: 3px 0 6px -2px rgba(0,0,0,0.5);
       -moz-box-shadow: 3px 0 6px -2px rgba(0,0,0,0.5);
            box-shadow: 3px 0 6px -2px rgba(0,0,0,0.5);
}

JavaScript

var owlC = $('.owl-carousel');

owlC.owlCarousel({
    loop:true,
    margin:0,
    responsiveClass:true,
    responsive:{
        0:{
            items:2,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    },
    onTranslated : onInitialized
});

function onInitialized () {

    console.info(this._current);
    console.info(this);
}