{namespace owl=TYPO3\OwlSlider\ViewHelpers} $(document).ready(function() { var sync1 = $("#sync1"); var sync2 = $("#sync2"); sync1.owlCarousel({ items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet : false, itemsTabletSmall : false, itemsMobile : false, itemsCustom : false, singleItem : true, itemsScaleUp : , slideSpeed : , paginationSpeed : , rewindSpeed : , autoPlay : , stopOnHover : , navigation : , navigationText : , rewindNav : , scrollPerPage : , pagination : , paginationNumbers : , responsive : , responsiveBaseWidth : , baseClass : , theme : , lazyLoad : , lazyFollow : , lazyEffect : , autoHeight : , dragBeforeAnimFinish : , mouseDrag : , touchDrag : , addClassActive : , transitionStyle : , afterAction : syncPosition, responsiveRefreshRate : , }); sync2.owlCarousel({ items : , itemsDesktop : , itemsDesktopSmall : , itemsTablet : , itemsTabletSmall : , itemsMobile : , itemsCustom : , singleItem : , itemsScaleUp : , slideSpeed : , paginationSpeed : , rewindSpeed : , autoPlay : , stopOnHover : , navigation : , navigationText : , rewindNav : , scrollPerPage : , pagination : , paginationNumbers : , responsive : , responsiveRefreshRate : , responsiveBaseWidth : , baseClass : , theme : , lazyLoad : , lazyFollow : , lazyEffect : , autoHeight : , dragBeforeAnimFinish : , mouseDrag : , touchDrag : , addClassActive : , transitionStyle : false, afterInit : function(el){ el.find(".owl-item").eq(0).addClass("synced"); } }); function syncPosition(el){ var current = this.currentItem; $("#sync2") .find(".owl-item") .removeClass("synced") .eq(current) .addClass("synced") if($("#sync2").data("owlCarousel") !== undefined){ center(current) } } $("#sync2").on("click", ".owl-item", function(e){ e.preventDefault(); var number = $(this).data("owlItem"); sync1.trigger("owl.goTo",number); }); function center(number){ var sync2visible = sync2.data("owlCarousel").owl.userItems; var num = number; var found = false; for(var i in sync2visible){ if(num === sync2visible[i]){ var found = true; } } if(found===false){ if(num>sync2visible[sync2visible.length-1]){ sync2.trigger("owl.goTo", num - sync2visible.length+2) }else{ if(num - 1 === -1){ num = 0; } sync2.trigger("owl.goTo", num); } } else if(num === sync2visible[sync2visible.length-1]){ sync2.trigger("owl.goTo", sync2visible[1]) } else if(num === sync2visible[0]){ sync2.trigger("owl.goTo", num-1) } } }); window.onload = function() { var anchorElements = document.getElementById('sync2').getElementsByTagName('a'); for (var i in anchorElements) anchorElements[i].onclick = function() { if(this.target === '') { window.open(this.href, '_self', false); } else { window.open(this.href, this.target); } } }