Bootstrap 3 + slick.js Multiple 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="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>
            <!-- Button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
              Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal1" 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>


            <!-- Button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
              Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             ...

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
      });
        
            $('.modal').on('show.bs.modal', function (e) {
      $('.carousel').resize();
       
    })

    });