How to bind owl carousel 2 with select option?

Question

How to bind owl carousel 2 with select option

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

ie 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

Answer 1

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>