grid owl carousel

by Vince

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://smashingboxes.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://smashingboxes.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<div id="current">{current number}</div>

<div class="owl-carousel hide-for-mobile">
	<div>
		<img src="http://placehold.it/300x200/&text=1a" id="1a" alt="">
		<img src="http://placehold.it/300x200/&text=1b" id="1b" alt="">
		<img src="http://placehold.it/300x200/&text=1c" id="1c" alt="">
	</div>
	<div>
		<img src="http://placehold.it/300x200/&text=2a" id="2a" alt="">
		<img src="http://placehold.it/300x200/&text=2b" id="2b" alt="">
		<img src="http://placehold.it/300x200/&text=2c" id="2c" alt="">
	</div>
	<div>
		<img src="http://placehold.it/300x200/&text=3a" id="3a" alt="">
		<img src="http://placehold.it/300x200/&text=3b" id="3b" alt="">
		<img src="http://placehold.it/300x200/&text=3c" id="3c" alt="">
	</div>
	<div>
		<img src="http://placehold.it/300x200/&text=4a" id="4a" alt="">
		<img src="http://placehold.it/300x200/&text=4b" id="4b" alt="">
		<img src="http://placehold.it/300x200/&text=4c" id="4c" alt="">
	</div>
	<div>
		<img src="http://placehold.it/300x200/&text=5a" id="5a" alt="">
		<img src="http://placehold.it/300x200/&text=5b" id="5b" alt="">
		<img src="http://placehold.it/300x200/&text=5c" id="5c" alt="">
	</div>
	<div>
		<img src="http://placehold.it/300x200/&text=6a" id="6a" alt="">
		<img src="http://placehold.it/300x200/&text=6b" id="6b" alt="">
		<img src="http://placehold.it/300x200/&text=6c" id="6c" alt="">
	</div>
</div>
<div class="owl-carousel2 show-for-mobile">
	<div>
		<img src="http://placehold.it/300x200/&text=1a" id="1a" alt="">
		<img src="http://placehold.it/300x200/&text=1b" id="1b" alt="">
	</div>
	<div>
		<img src="http://placehold.it/300x200/&text=2a" id="2a"...

CSS

.owl-carousel {
	outline: 1px dotted pink;
}
.owl-carousel div {
	outline: 1px dotted grey;
}
.owl-carousel div > img {display: block; outline: 1px dashed
 black;}
.owl-carousel div > img:first-child {margin-bottom: 10px;}
.owl-carousel div > img:last-child {margin-top: 10px;}
.show-for-mobile {display: none;}
.hide-for-mobile {display: block;}
@media screen only and (max-width: 767px) {
	.show-for-mobile {display: block !important;}
	.hide-for-mobile {display: none !important;}
}

JavaScript

$(function () {
	var owl = $('.owl-carousel');
	var owl2 = $('.owl-carousel2');
	owl.owlCarousel({
		items: 3,
		margin: 10
	});
	owl2.owlCarousel({
		items: 3,
		margin: 10
	});
	$('.owl-carousel img[id]').click(function () {
		$('#current').text($(this).attr('id'));
	});
});