Bootstrap 3 + slick.js Modal Window

Bootstrap + slick.js doesn't work well on Modal Window

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.css">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="slider carousel">
            <div><img src="http://placehold.it/350x150" class="img-responsive" /></div>
            <div><img src="http://placehold.it/350x150/323232/ff0000" class="img-responsive" /></div>
            <div><img src="http://placehold.it/350x150/2edff00/eeeeee" class="img-responsive" /></div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css');

JavaScript

$(document).ready(function() {

      $('.carousel').slick({
          autoplay: true,
          autoplaySpeed: 5000,
          arrows: false,
          dots: true,
          infinite: true,
          speed: 800,
          fade: true
      });

    });