Как сделать, чтобы две owl карусели и input type="range" синхронно работали и переключали друг друга?

Question

[Владимир]

Есть две карусели и input type="range". Сейчас не переключает вторая карусель первую, а так все работает, как сделать чтобы вторая переключала первую еще. Первая .academy-slider переключает вторую .academy-slider__tab и input type="range" вроде синхронно работают. Сами карусели можно посмотреть тут: https://dvvinfo.github.io/pekarstas/academy.html
Надо перейти в мобильный вид и обновить страницу, там js при меньше 576 px вкл карусели.

JS код

var owl = $(".academy-slider"),
    // rangeArr = [],
    inputType = $(".slider-range__input");
  owl.owlCarousel({
    items: 1,
    //loop: true,
    margin: 8,
    autoHeight: true,
    stagePadding: 10,
    slideBy: 1,
  });

  owl.on("changed.owl.carousel", function (event) {
    console.log(event.item.index);
    inputType.val(event.item.index);
  });
  $("input").on("change", function (e) {
    e.preventDefault();
    console.log(inputType.val());
    // console.log(e.item.index);
    // FIGURE OUT HOW TO GET CAROUSEL INDEX

    $(".academy-slider").trigger("to.owl.carousel", [inputType.val(), 1, true]);
  });
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });

  // ========================================= мобильная карусель табов академии ========================
  var owl = $(".academy-slider__tab"),
    // rangeArr = [],
    inputType = $(".slider-range__input");
  owl.owlCarousel({
    items: 1,
    //loop: true,
    margin: 8,
    autoHeight: true,
    slideBy: 1,
  });

  owl.on("changed.owl.carousel", function (event) {
    console.log(event.item.index);
    inputType.val(event.item.index);
  });
  $("input").on("change", function (e) {
    e.preventDefault();
    console.log(inputType.val());
    // console.log(e.item.index);
    // FIGURE OUT HOW TO GET CAROUSEL INDEX

    $(".academy-slider__tab").trigger("to.owl.carousel", [
      inputType.val(),
      1,
      true,
    ]);
  });
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });

  var o1 = $(".academy-slider");
   var o2 = $(".academy-slider__tab");
   var o2settings = {
     items: 1,
     //loop: true,
     margin: 8,
     autoHeight: true,
     slideBy: 1,
   };
   o2.owlCarousel(o2settings);

   o1.on("translate.owl.carousel", function (e) {
     o2.trigger("to.owl.carousel", e.page.index * o2settings.slideBy);
   });

Answer 1

[cssfish]

зачем там Input? У owl carousel есть родной плагин для синхронизации каруселей - загуглите owl.linked.js