JS карусель с полосой прокрутки, есть проблема

Question

Подскажите пожалуйста в чем проблема с моей каруселью с полоской прокрутки, а именно при использование карусели полоса прокрутки отъезжает очень в право, за предел границ.

Вот моя ссылка, для примера: http://car.synapsepro.site/ Вот ссылка на видео: https://yadi.sk/i/9FLMSkcVzLM1Vw

Как я понимаю ошибка вот здесь : https://i.imgur.com/Lvv5rUf.png (ссылка на фото)

Помогите JS кодом

        $(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="http://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://car.synapsepro.site/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://car.synapsepro.site/css/owl.theme.default.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>
  
<script type="text/javascript" src="http://car.synapsepro.site/js/owl.carousel.js"></script>
<script type="text/javascript" src="http://car.synapsepro.site/js/jquery-ui.js"></script>

Заранее благодарен.

БЛОГ НА HUSL

JS карусель с полосой прокрутки, есть проблема

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