Slick slider

by NateW

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="wrapper-slider">
  <div> 
    <div class="draggable-element" class="ui-widget-content">
      <p>Drag me around</p>
    </div>
    <div class="draggable-element" class="ui-widget-content">
      <p>and me!</p>
    </div>
  </div>
  <div><h3>1</h3><h3>1</h3><h3>1</h3></div>
  <div><h3>2</h3><h3>2</h3><h3>2</h3><h3>2</h3></div>
  <div><h3>3</h3><h3>3</h3></div>
</div>

CSS

.wrapper-slider div {
    background-color: gray;
    min-height: 300px;
}
.wrapper-slider .draggable-element {
    margin: 10px;
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border: 1px solid #aaaaaa;
    background-color: #fff;
}

JavaScript

$('.wrapper-slider').slick({
  dots: false,
  infinite: false,
  centerPadding: "20px",
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

$(function() {
    $( ".draggable-element" ).draggable();
  });

$(".draggable-element").on("draggable mouseenter mousedown",function(event){
    event.stopPropagation();
});