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:
You can also see examples of the carousel and its code on GitHub here