Sly slider

Script link

<script type='text/javascript' src='https://3404462.fs1.hubspotusercontent-na1.net/hubfs/3404462/Assets/js/sly.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script>

HTML

<div class="scroll_content" id="forcecentered">
    <ul class="testimonial-slider__slide">
     <li>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>
     <li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
     <li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li>
     <li>28</li><li>29</li>
    </ul>
   </div>
<div class="scrollbar">
       <div class="handle"></div>
</div>

JS

if($('.testimonial-slider__slide')[0]){
  var $happy_client = $('.scroll_content');
  if ($happy_client){
    var $slidee = $happy_client.children('.testimonial-slider__slide').eq(0);
    var $wrap = $happy_client.parent();
    $happy_client.sly({
      horizontal: 1,
      itemNav: 'basic',
      smart: 1,
      activateOn: 'click',
      mouseDragging: 1,
      touchDragging: 1,
      releaseSwing: 1,
      startAt: 0,
      scrollBar: $wrap.find('.scrollbar'),
      scrollBy: 1,
      activatePageOn: 'click',
      speed: 300,
      elasticBounds: 1,
      easing: 'easeOutExpo',
      dragHandle: 1,
      dynamicHandle: 1,
      clickBar: 1
    });
  }
}