Как сделать полосу воспроизведения в дотах слайда в owl.carusel как в историях инстаграм?

Question

[Алексей Королёв]

Хочу реализовать идею со сторис на сайте через owl carusel. В этом плагине есть autoplay и есть dots, с которыми я хочу взаимодействовать. То есть дот будет шириной скажем в 50px каждый и в зависимости от времени показа слайда заполняться.

Подскажите как такое реализовать?

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
</div>

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoplay:false
    autoplayTimeout:5000
    autoplayHoverPause:false
    dots: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Comments

[Stanislav]

Под себя осталось адаптировать
Пример

Answer 1

[Danny Arty]

Вот набросал пример по быстрому. В примере например не учтено переключение слайдов вручную или если слайд будет не картинка, а видео, тогда AutoPlay надо будет убрать и для каждого слайда ставить setDelay().

Comments

[Алексей Королёв]

Спасибо большое, то что нужно