Adaptive jQuery carousel with scroll bar (scroll bar carousel)

To create an adaptive carousel with a scroll of this kind:

js libraries owl, slick will not work, because they need to be finalized + there is a problem with the scroll bar: if you press the arrows, it does not move. The problem can be solved by installing the sly-js library.

Download this library you can here

Connect jQuery and Sly js

<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>

The code of carousel could be like that:

<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>

Carousel call code in js (scripts.js file):

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')
        });
    }());
});

You can view demo versions of carousel types, as well as carousel settings on the library developer’s website:

http://darsa.in/sly

You can also see examples of the carousel and its code on GitHub here