OWL Responsive

by Korah Babu Varghese

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<body>
		<p>Karuzela</p>
		
		<div id="contentBox" class="">
			<div id="owlarea">
				<div class="owl-carousel">
					<div class="item">1</div>
					<div class="item">2</div>

				</div>
			</div>
		</div>
		
	<p class="btnres">Zmień rozmiar okna</p>
	
</body>

CSS

.owl-carousel { min-height: 300px; overflow: hidden; }
.owl-item { float: left; background: red; text-align:center; height: 100px; }

#owlarea{ background-color:#BBB; }
#contentBox{ position: relative; }
#contentBox #owlarea{ position:relative; width:100%; }
#contentBox.open #owlarea{ width: calc(100% - 300px) !important; }

JavaScript

$(document).ready(function() {

	$('.owl-carousel').owlCarousel({ // .owl-carousel is the element selector
		loop: true,
		onResized: callback,
		margin: 10, // gives space between carousel items
		stagePadding: 20, // shows a bit of the next item, which is still not visible
		responsiveBaseElement: '#owlarea',
		responsive:{ // responsive behaviour
			0:{
				items:2
			},
				768:{ // for example at 768 screen width, owl carousel will only show two items
				items:2
			},
				970:{
				items:2
			}
		}
	})
	
	function callback() {
		console.log('callback: onResized');
	}
	
	$(".btnres").click(function(){
		$('#contentBox').toggleClass('open');
		owlres();
		//setTimeout(function() { owlres(); }, 500); // timeout
	})
	
	function owlres() {
		//$('.owl-carousel').trigger('resize.owl');
		$('.owl-carousel').trigger('resize.owl.carousel');
		
		//$('.owl-carousel').trigger('refresh.owl');
		$('.owl-carousel').trigger('refresh.owl.carousel');
		
		//$('.owl-carousel').data('owlCarousel').refresh();
		//$('.owl-carousel').owlCarousel('invalidate', 'all').owlCarousel('refresh');
		// ALL THIS SH*T ^^ ACTIONS ^^ NOT WORKING!!!!
		
		// THIS ACTIONS WORKING!!
		//$('.owl-carousel').trigger('next.owl.carousel');
		//$('.owl-carousel').trigger('destroy.owl');
		
		// PATH FOR RESIZE ACTIONS BUT NOT WORKING IN IE
		//window.dispatchEvent(new Event('resize'));
        
		console.log('owlres');
	}

});