Cacher is the code snippet organizer for pro developers

<!-- · · · · · · · ·
	CAROUSEL 1 
-->

<!-- carousel wrapper -->
<div class="slider-gallery-images clearfix">
	<!-- carousel -->
	<div class="owl-carousel owl-theme js-slider-gallery-images">

		<div class="item" data-hash="my-hash-01"><img class="owl-lazy" data-src="https://unsplash.it/1024/600?image=660" alt=""></div>
		<!-- more items ... -->
	</div>
	<!-- /carousel -->

  <!-- nav -->
  <button class="btn goPrev" id="js-slider-gallery-images-prev">
    <i class="icon-chevron-left"></i>
  </button>
  <button class="btn goNext" id="js-slider-gallery-images-next">
    <i class="icon-chevron-right"></i>
  </button>
  <!-- /nav --> 
</div>
<!-- /carousel wrapper -->

<!-- · · · · · · · ·
	CAROUSEL 2 
-->

<!-- carousel wrapper -->
<div class="slider-gallery-thumbs clearfix">
  <!-- carousel -->
  <div class="owl-carousel owl-theme js-slider-gallery-thumbs">

    <div class="item"><img class="img-responsive" src="https://unsplash.it/300/300?image=660"></div>
    <!-- more items ... -->

  </div>
  <!-- /carousel -->
</div>
<!-- /carousel wrapper -->

var gallerySyncedCarouselsFlag = false,
		gallerySyncedCarouselsDuration = 300;

/* · · · · · · · ·
Carousel 1
*/

var sliderGalleryImages = $('.js-slider-gallery-images');
sliderGalleryImages.owlCarousel({
	items:1,  
	//loop: true, //cuidado si lo ponemos a true: infinite: cuidado cuando usemos esta opcion porque 'clonea' los items, y si tenemos elementos que lleven #id, duplica los #id, lo cual es un problema!!! 
	dots: false,
	lazyLoad: true,
	animateOut: 'fadeOut',
	animateIn: 'fadeIn',
	navSpeed: 5000,
	//dotsSpeed: 4000,
	smartSpeed: 500, //velocidad del drag
	addClassActive: true, 
	URLhashListener:true,
	startPosition: 'URLHash'
})
.on('changed.owl.carousel', function (e) {
	if (!gallerySyncedCarouselsFlag) {
		gallerySyncedCarouselsFlag = true;
		sliderGalleryThumbs.trigger('to.owl.carousel', [e.item.index, gallerySyncedCarouselsDuration, true]);
		gallerySyncedCarouselsFlag = false;
	}
});

$("#js-slider-gallery-images-next").click(function(){
	sliderGalleryImages.trigger('next.owl.carousel', [500]); //OJO!!!! LE PASAMOS LA VELOCIDAD A LA QUE TIENE QUE EFECTUAR LOS SLIDES!
});

$("#js-slider-gallery-images-prev").click(function(){
	sliderGalleryImages.trigger('prev.owl.carousel', [500]);
});

/* · · · · · · · ·
Carousel 2
*/

var sliderGalleryThumbs = $('.js-slider-gallery-thumbs');
sliderGalleryThumbs.owlCarousel({

	//loop: true, //cuidado si lo ponemos a true: infinite: cuidado cuando usemos esta opcion porque 'clonea' los items, y si tenemos elementos que lleven #id, duplica los #id, lo cual es un problema!!! 
	//dots: false,
	navSpeed: 5000,
	
	responsive:{
    0:{
			items:3
		},
		600:{
			items:6
		},
		1000:{
			items:9
		}
	},
	
	margin: 8 //separation between slides

})
.on('click', '.owl-item', function () {
	sliderGalleryImages.trigger('to.owl.carousel', [$(this).index(), gallerySyncedCarouselsDuration, true]);

})
.on('changed.owl.carousel', function (e) {
	if (!gallerySyncedCarouselsFlag) {
		gallerySyncedCarouselsFlag = true;		
		sliderGalleryImages.trigger('to.owl.carousel', [e.item.index, gallerySyncedCarouselsDuration, true]);
		gallerySyncedCarouselsFlag = false;
	}
});