How to bind owl carousel 2 with select option?

How to bind owl carousel 2 with select option

There is a slider that I want to associate with the select option

i.e. when option 1 is selected - active to become the corresponding slide sync2

2 option - 2 slide sync2

Also when clicking on the slide sync2, the select option was changed

My code

$(document).ready(function() {

  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 4; //globaly define number of elements per page
  var syncedSecondary = true;

  sync1.owlCarousel({
    items : 1,
    slideSpeed : 2000,
    nav: true,
    //autoplay: true,
    dots: true,
    loop: true,
    responsiveRefreshRate : 200,
    navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
  }).on('changed.owl.carousel', syncPosition);

  sync2
    .on('initialized.owl.carousel', function () {
      sync2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : slidesPerPage,
    dots: true,
    nav: true,
    smartSpeed: 200,
    slideSpeed : 500,
    slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', syncPosition2);

  function syncPosition(el) {
    //if you set loop to false, you have to restore this next line
    //var current = el.item.index;
    
    //if you disable loop you have to comment this block
    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;
    }
    
    //end block

    sync2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = sync2.find('.owl-item.active').length - 1;
    var start = sync2.find('.owl-item.active').first().index();
    var end = sync2.find('.owl-item.active').last().index();
    
    if (current > end) {
      sync2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      sync2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }
  
  function syncPosition2(el) {
    if(syncedSecondary) {
      var number = el.item.index;
      sync1.data('owl.carousel').to(number, 100, true);
    }
  }
  
  sync2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });
  
  $('.select').on("change", ".owl-item", function(e){    
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });
  
  

});

#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
}
#sync2 .item {
  background: #C9C9C9;
  padding: 10px 0px;
  margin: 5px;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}
.owl-theme .owl-nav {
  /*default owl-theme theme reset .disabled:hover links */
}
.owl-theme .owl-nav [class*='owl-'] {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.owl-theme .owl-nav [class*='owl-'].disabled:hover {
  background-color: #D6D6D6;
}
#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
select {
  height: 40px;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>


<select class="select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
</select>

<div id="sync1" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1></div>
  <div class="item">
    <h1>2</h1></div>
  <div class="item">
    <h1>3</h1></div>
  <div class="item">
    <h1>4</h1></div>
  <div class="item">
    <h1>5</h1></div>
  <div class="item">
    <h1>6</h1></div>
  <div class="item">
    <h1>7</h1></div>
  <div class="item">
    <h1>8</h1></div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1></div>
  <div class="item">
    <h1>2</h1></div>
  <div class="item">
    <h1>3</h1></div>
  <div class="item">
    <h1>4</h1></div>
  <div class="item">
    <h1>5</h1></div>
  <div class="item">
    <h1>6</h1></div>
  <div class="item">
    <h1>7</h1></div>
  <div class="item">
    <h1>8</h1></div>
</div>

Thank you I will be glad to any help

Solution

You are almost close but you need to get selected value with $(this).val() check it out:

$(document).ready(function() {

  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 4; //globaly define number of elements per page
  var syncedSecondary = true;

  sync1.owlCarousel({
    items : 1,
    slideSpeed : 2000,
    nav: true,
    //autoplay: true,
    dots: true,
    loop: true,
    responsiveRefreshRate : 200,
    navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
  }).on('changed.owl.carousel', syncPosition);

  sync2
    .on('initialized.owl.carousel', function () {
      sync2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : slidesPerPage,
    dots: true,
    nav: true,
    smartSpeed: 200,
    slideSpeed : 500,
    slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', syncPosition2);

  function syncPosition(el) {
    //if you set loop to false, you have to restore this next line
    //var current = el.item.index;
    
    //if you disable loop you have to comment this block
    var count = el.item.count-1;
    var current = Math.round(el.item.index - (el.item.count/2) - .5);
    var selected = current + 1;
    
    $('.select option[value="'+ selected +'"]').prop('selected', true);
    
    if(current < 0) {
      current = count;
    }
    if(current > count) {
      current = 0;
    }
    
    //end block

    sync2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = sync2.find('.owl-item.active').length - 1;
    var start = sync2.find('.owl-item.active').first().index();
    var end = sync2.find('.owl-item.active').last().index();
    
    if (current > end) {
      sync2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      sync2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }
  
  function syncPosition2(el) {
    if(syncedSecondary) {
      var number = el.item.index;
      sync1.data('owl.carousel').to(number, 100, true);
    }
  }
  
  sync2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });
  
  $('.select').on("change", function(e){
  var number = $(this).val() - 1;
    
    sync1.data('owl.carousel').to(number, 300, true);
  });
  
  

});

#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
}
#sync2 .item {
  background: #C9C9C9;
  padding: 10px 0px;
  margin: 5px;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}
.owl-theme .owl-nav {
  /*default owl-theme theme reset .disabled:hover links */
}
.owl-theme .owl-nav [class*='owl-'] {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.owl-theme .owl-nav [class*='owl-'].disabled:hover {
  background-color: #D6D6D6;
}
#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
select {
  height: 40px;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>


<select class="select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
</select>

<div id="sync1" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1></div>
  <div class="item">
    <h1>2</h1></div>
  <div class="item">
    <h1>3</h1></div>
  <div class="item">
    <h1>4</h1></div>
  <div class="item">
    <h1>5</h1></div>
  <div class="item">
    <h1>6</h1></div>
  <div class="item">
    <h1>7</h1></div>
  <div class="item">
    <h1>8</h1></div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1></div>
  <div class="item">
    <h1>2</h1></div>
  <div class="item">
    <h1>3</h1></div>
  <div class="item">
    <h1>4</h1></div>
  <div class="item">
    <h1>5</h1></div>
  <div class="item">
    <h1>6</h1></div>
  <div class="item">
    <h1>7</h1></div>
  <div class="item">
    <h1>8</h1></div>
</div>