Адаптивная карусель jQuery со скрол баром (scroll bar)

Что бы создать адаптивную карусель со скроллом такого вида:

js библиотеки owl, slick не подойдут, т.к. их нужно дорабатывать + есть проблема ко скролл баром: есил нажимать стрелки, он не двигается. Проблему можно решить установив библиотеку sly-js.

Cкачать данную библиотеку можно здесь

Подключаем jQuery и библиотеку

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://demo.mctaylis.fr/owl-carousel-scrollbar/js/jquery-ui.min.js"></script>

<script src=".../inc/js/scripts.js"></script>
<script src=".../inc/js/sly.js"></script>

Код карусели может быть таким:

<div class="block">
	<div class="frame" id="forcecentered" style="overflow: hidden;">
		<ul class="clearfix" style="transform: translateZ(0px) translateX(-227px); width: 6840px;">
			<li class="active">0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>
	<div class="scrollbar">
		<div class="handle"></div>
	</div>
	<div class="controls center">
		<button class="btn prev"><i class="icon-chevron-left"></i> prev</button>
		<button class="btn next">next <i class="icon-chevron-right"></i></button>
	</div>
</div>

Код вызова карусели в js (файл scripts.js):

jQuery(function($){
    'use strict';
    // -------------------------------------------------------------
    //   Force Centered Navigation
    // -------------------------------------------------------------
    (function () {
        var $frame = $('#forcecentered');
        var $wrap  = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'centered',
            smart: 1,
            activateMiddle: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 2,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next')
        });
    }());
});

Посмотреть демо-версии видов каруселей, а так же настройки карусели можно на сайте разработчика библиотеки:

http://darsa.in/sly

Так же примеры работы карусели и ее код можно посмотреть на GitHub здесь