Synced Owl Carousels with wrong current index fix if loop true

by Yunus Gaziev

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<header class="app-header">
  <span>main</span> / <span>about</span> / <span>contacts</span>
</header>

<div class="owl-carousel owl-theme owl-theme--main">
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/1/);">
    <h1>Awesome Carousel 1</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/2/);">
    <h1>Awesome Carousel 2</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/3/);">
    <h1>Awesome Carousel 3</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/4/);">
    <h1>Awesome Carousel 4</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/5/);">
    <h1>Awesome Carousel 5</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/6/);">
    <h1>Awesome Carousel 6</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/7/);">
    <h1>Awesome Carousel 7</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/8/);">
    <h1>Awesome Carousel 8</h1>
    <p>tag: techniks</p>
    <a...

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: "Lato","Helvetica Neue","Helvetica", Arial,sans-serif;
}

body {
  max-width: 640px;
  margin: 0 auto;
}

.app-header {
  position: fixed;
  z-index: 35;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 26px 0;
}

.owl-theme {
  margin: 0 0 1rem 0;
}

.owl-theme .item {
  height: 10rem;
  background-color: #ffc107;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 1rem;
}

.item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
}

.owl-theme--main .item {
  position: relative;
  height: 20rem;
  padding-top: 5rem;
}

.owl-theme--main .item * {
  position: relative;
  z-index: 10 !important;
}

/* .owl-theme--main .item::before {
  content: '';
  position: absolute;
  z-index: 5 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(
      to bottom,
      hsl(0, 0%, 100%) 0%,
      hsla(0, 0%, 100%, 0.987) 8.1%,
      hsla(0, 0%, 100%, 0.951) 15.5%,
      hsla(0, 0%, 100%, 0.896) 22.5%,
      hsla(0, 0%, 100%, 0.825) 29%,
      hsla(0, 0%, 100%, 0.741) 35.3%,
      hsla(0, 0%, 100%, 0.648) 41.2%,
      hsla(0, 0%, 100%, 0.55) 47.1%,
      hsla(0, 0%, 100%, 0.45) 52.9%,
      hsla(0, 0%, 100%, 0.352) 58.8%,
      hsla(0, 0%, 100%, 0.259) 64.7%,
      hsla(0, 0%, 100%, 0.175) 71%,
      hsla(0, 0%, 100%, 0.104) 77.5%,
      hsla(0, 0%, 100%, 0.049) 84.5%,
      hsla(0, 0%, 100%, 0.013) 91.9%,
      hsla(0, 0%, 100%, 0) 100%
    );
} */

JavaScript

let owlMain = $('.owl-theme--main');
let owlCtrl = $('.owl-theme--ctrl');

let currentIdxInfo = $('#current-idx');

function fixOwlCurrentIdx(event) {
	let current = (event.item.index + 1) - event.relatedTarget._clones.length / 2;
	let itemsCount = event.item.count;

	if (current > itemsCount || current == 0) {
		current = itemsCount - (current % itemsCount);
	}

	return current - 1;
}

owlMain
	.owlCarousel({
  	items: 1,
    dots: false,
    nav: false,
    animateOut: 'fadeOut',
  });
  
 owlCtrl
	.owlCarousel({
    loop: true,
  	items: 3,
    dots: true,
    dotsEach: true,
    nav: true,
    margin: 16,
    autoplay: true,
    autoplayTimeout: 1000,
    onInitialized: (event) => {
    	currentIdxInfo.html(fixOwlCurrentIdx(event));
      
      owlCtrl.find('.item').on('click', function() {
      	owlCtrl.trigger('to.owl.carousel', [$(this).data('index') - 1]);
      });
    },
    onChanged: (event) => {
    	let currentIdx = fixOwlCurrentIdx(event);
      
    	currentIdxInfo.html(currentIdx);
      
      owlMain.trigger('to.owl.carousel', [currentIdx]);
    },
  });