How to link two "owlslider" sliders?

Question

css

the task is to make a similar slider

Big picture - active slide
small pictures - slides of the same slider

Essence: the tape from the slides is scrolled and the desired slide is selected, flattering the big picture, the slides below are also scrolled.
there is a SlickSlider slider, it creates two sliders and they are connected to each other. But the customer needs OwlSlider2, I google Google, I can’t find anything. I don’t see such a function in the docks (maybe I’m blind). How can I accomplish this task? what tell me?

Answer 1

It's easier to change the slider to slick, there is a usable solution to your problem. 2 sliders are made:

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

where asNavFor: - bind sliders to each other.

Answer 2

Stupid question, did you try to take two sliders and remove the arrows and id from the second one?)

Answer 3

You can link them via https://owlcarousel2.github.io/OwlCarousel2/docs/a... but you will have to write the implementation yourself