JS owl caraousel + scroll bar неадекватно работает

Question

Уже кучу времени потратил на карусельный недуг с полосой прокрутки, в просторах интернета нашел переделенный OWL Carousel со скрол баром. но есть одна беду. Когда устанавливаю на него кнопку input=radio при переключение этих кнопок(с первого раза или через несколько кликов) - ползунок, куда то улетает вправо в невиданные края, что естественно не правильно.

        $(document).ready(function()
        {
            var owl = $('#list');

            owl.on('initialized.owl.carousel', function(e)
            {
                var perPage = e.page.size;
                var itemCount = $('#carousel .item').length - (perPage - 1);
                var barWidth = 100 / itemCount;
                $('.scrollbar .bar-container').css('width', barWidth+'%');
            });

            owl.owlCarousel({
                loop: false,
                margin: 24,
                dots: false,
                nav: false,
                items: 3,
                center: false,
            });

            owl.on('dragged.owl.carousel', function(e)
            {
                var barPosition = $('.scrollbar .bar-container').width() * e.item.index;
                $('.scrollbar .bar-container').animate({left: barPosition});
            });

            $('.scrollbar .bar-container').draggable({
                axis: 'x',
                containment: 'parent',
                drag: function(e, ui) {
                    var scrollPos = Math.round(ui.position.left / $('.scrollbar .bar-container').width());
                    owl.trigger('to.owl.carousel', scrollPos);
                }
            });
        });

        body { background-color: #f0f0f0; }
        div { font-family: "Open Sans", Arial, sans-serif; }
        h1 { color: #a8a8a8; margin-top: 60px; font-family: "Open Sans", Arial, sans-serif; text-align: center; text-transform: uppercase; font-weight: 300; }
        h1 span { text-transform: none; font-size: 14px; display: block; }
        a { color: #00aef0; text-decoration: none; font-weight: 400; }
        #carousel { width: 1200px; position: relative; margin: 0 auto; }
        .owl-item { background-color: #e1e1e1; text-align: center; padding: 42px 0; }
        .scrollbar { width: 100%; height: 1px; position: relative; }
        .scrollbar .bar-container { position: absolute; left: 0; top: -2px; padding: 12px 0; }
        .scrollbar .bar-container:hover .bar, .scrollbar .bar-container:active .bar { background-color: #00aef0; }
        .scrollbar .bar-container .bar { height: 4px; background: #bbb; width: 100%; }
        nav div { display: inline-block; padding: 12px; cursor: pointer; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 12px; background-color: #00aef0; color: #fff; }
        nav div.disabled { background-color: #e1e1e1; color: #fff; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<section id="carousel">
        <div id="list" class="owl-carousel owl-theme">
            <div class="item">
                <div>1</div>
                <div class="h1"><input type="radio" class="form-control h1" name="mytet">qwe</div>
            </div>
            <div class="item">
                <div>2</div>
                <div class="h1"><input type="radio" class="form-control h1" name="mytet">qwe</div>
            </div>
            <div class="item">
                <div>3</div>
                <div class="h1"><input type="radio" class="form-control h1" name="mytet">qwe</div>
            </div>
            <div class="item">
                <div>4</div>
                <div class="h1"><input type="radio" class="form-control h1" name="mytet">qwe</div>
            </div>
            <div class="item">
                <div>5</div>
                <div class="h1"><input type="radio" class="form-control h1" name="mytet">qwe</div>
            </div>
        </div>
        <div class="scrollbar">
            <div class="bar-container">
                <div class="bar"></div>
            </div>
        </div>
    </section>

Вот код примера: https://jsfiddle.net/synapse3/n7kaeL18/5/ Почему - то тут в редактор не получилось поставить, не работает

Помогите пожалуйста, с данной проблемой

p.s. - может предложите другую карусель со scrollbar'ом, полосой прокрутки Пробовал Sly Carousel - но там нет возможности выставить определенное кол-во слайдов для показа

Подскажите пожалуйста, уже не знаю что делать и за что браться

БЛОГ НА HUSL

JS owl caraousel + scroll bar неадекватно работает

Ответы (0 шт):