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=""></script>
<script src=""></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>
	<div class="scrollbar">
		<div class="handle"></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>


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


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

        // Call Sly on frame
            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:


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


Please enter your comment!
Please enter your name here