var sync1 = $(".slider");
var sync2 = $(".navigation-thumbs");
var thumbnailItemClass = '.owl-item';
var slides = sync1.owlCarousel({
video:true,
startPosition: 0,
items:1,
loop:true,
margin:0,
autoplay:true,
speed:600, // ½½¶óÀ̵ù ¼Óµµ
autoplayTimeout:5000,
autoplayHoverPause:false,
animateIn: 'fadeIn', // add this
animateOut: 'fadeOut', // and this
nav: false,
dots: true,
navText: [
"",
""
]
}).on('changed.owl.carousel', syncPosition);
function syncPosition(el) {
$owl_slider = $(this).data('owl.carousel');
var loop = $owl_slider.options.loop;
if(loop){
var count = el.item.count-1;
var current = Math.round(el.item.index - (el.item.count/2) - .5);
if(current < 0) {
current = count;
}
if(current > count) {
current = 0;
}
}else{
var current = el.item.index;
}
var owl_thumbnail = sync2.data('owl.carousel');
var itemClass = "." + owl_thumbnail.options.itemClass;
var thumbnailCurrentItem = sync2
.find(itemClass)
.removeClass("synced")
.eq(current);
thumbnailCurrentItem.addClass('synced');
if (!thumbnailCurrentItem.hasClass('active')) {
var duration = 5000;
sync2.trigger('to.owl.carousel',[current, duration, true]);
}
}
var thumbs = sync2.owlCarousel({
startPosition: 0,
items:6,
loop:false,
margin:5,
autoplay:false,
nav: false,
dots: false,
onInitialized: function (e) {
var thumbnailCurrentItem = $(e.target).find(thumbnailItemClass).eq(this._current);
thumbnailCurrentItem.addClass('synced');
},
})
.on('click', thumbnailItemClass, function(e) {
e.preventDefault();
var duration = 600;
var itemIndex = $(e.target).parents(thumbnailItemClass).index();
sync1.trigger('to.owl.carousel',[itemIndex, duration, true]);
}).on("changed.owl.carousel", function (el) {
var number = el.item.index;
$owl_slider = sync1.data('owl.carousel');
$owl_slider.to(number, 100, true);
});