slick with Dragdealer

<script type="text/javascript"> 
  var slick ;
  var drag;
 $(document).ready(function(){
 var count = $(".slide").length;
  slick = $('.center').slick({
    arrows: false,
    centerMode: true,
    infinite: true,
    centerPadding: '230px',
    slidesToShow: 1,
    speed: 300,
    dots: false,
    autoplay : true,
    autoplaySpeed : 100000
  }); 

  $(".center").on('afterChange', function(event, slick, currentSlide){
   drag.setStep($('.center').slick('slickCurrentSlide')+1)
  });
  
  drag = new Dragdealer('rolling_Bar',{
    x: 0,
    steps: count,
    callback : function(x,y){
    var currentSlide = drag.getStep()[0]-1 ;
    if($('.center').slick('slickCurrentSlide') != currentSlide){
     $('.center').slick('slickGoTo',drag.getStep()[0]-1);
    }
    }
  }); 

  $("#barImage").width(drag.getStepWidth())

 });

</script>

<div class="content">
   <div class="center">
  <div>
    <div class="slide prod">
   <a href="#">
    <dl>
     <p><img src="./images/visuan_img2.jpg"  /></p>
    </dl>
   </a>
    </div>
  </div>
  <div>
    <div class="slide prod">
   <a href="#">
    <dl>
     <p><img src="./images/visuan_img2.jpg"  /></p>
     
    </dl>
   </a>
    </div>
  </div>
  <div>
    <div class="slide prod">
   <a href="#">
    <dl>
     <p><img src="./images/visuan_img2.jpg"  /></p>
    </dl>
   </a>
    </div>
  </div>

   </div>
 </div>

 <div id="rolling_Bar" class="rolling_Bar dragdealer" >
  <span class='handle'>
   <img id="barImage" src="./images/rolling_bar_on.png" alt="롤링on이미지" style="width:150px;height:30px;" />
  </span> 
 </div>

http://kenwheeler.github.io/slick/


https://skidding.github.io/dragdealer/