How to handle some events so that owl-carousel looks correct?

Question

css

The situation is as follows, there is a slider - each slide in it is shifted to the left (this is necessary so that a piece of the next slide is visible) and there is an infinite scroll (loop: true - if set to false, then the last slide will have an empty space on the right).

I tried to transfer 3 owl-carousel events:
1. Click on "Slide 1, Slide 2", etc. - accordingly, when clicked, the slider scrolls to a certain slide (everything is tied to positions)
2. Drag with the mouse (drag) - also, in accordance with the positions, the .nav span was made active.
3. Arrow clicks - again, the .nav span was made active. (For some reason, in the example, the back click does not work - the class does not change)

All this works quite well with loop: false - that is, if the carousel is not infinite, but if it is infinite (loop: true), then each item is cloned and all my code breaks.

How to fix this whole thing so that it looks like with loop: false ?

I did all the points with my meager knowledge of js / jquery (thanks for the 3rd point, stackover).

The code itself : https://jsfiddle.net/3a7a3uwf/23/

probably for people with good knowledge of js it will not be difficult to fix, thanks in advance to everyone for the answers.

Answer 1

You can use a fractional value of items