How to sync two owlCarousel using version 2

Sync two owlCarousel v2.0.0-beta.2.4

JS:

jQuery(document).ready(function ($) {

	var $sync1 = $(".big-images"),
		$sync2 = $(".thumbs"),
		flag = false,
		duration = 300;

	$sync1
		.owlCarousel({
			items: 1,
			margin: 10,
			nav: true,
			dots: true
		})
		.on('changed.owl.carousel', function (e) {
			if (!flag) {
				flag = true;
				$sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
				flag = false;
			}
		});

	$sync2
		.owlCarousel({
			margin: 20,
			items: 6,
			nav: true,
			center: true,
			dots: true
		})
		.on('click', '.owl-item', function () {
			$sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);

		})
		.on('changed.owl.carousel', function (e) {
			if (!flag) {
				flag = true;		
				$sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
				flag = false;
			}
		});
});

HTML:

<div class="big-images">
	...items...
</div>
<div class="thumbs">
	...items...
</div>