Slick slider not showing up inside Bootstrap modal

Question

I'm trying to implement the slick slider inside bootstrap modal.

I used Slider Syncing with image thumbnails below but when i clicked the button to show the up modal the slick slider content not showing up until you click the arrows or do something inside the modal container.

I want it to show up immediately after you click the button.

notes: bootstrap v2.3, slick slider v1.9.0

Below is my code and also here is the codepen. Feel free to fork it.

   $('.slider-for--gallery').slick({
      slidesToShow: 1,
      slidesToScroll: 1,      
      //fade: true,
      asNavFor: '.slider-nav--gallery'
   });
   $('.slider-nav--gallery').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: false,
      asNavFor: '.slider-for--gallery',
      focusOnSelect: true
   });

.img-fluid {
  max-width: 100%;
  height: auto;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
  padding: 0;
  margin: 0;
}

.modal.fade.in {
  top: 0;
}

.modal-fullscreen {
  width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal-dialog {
  position: relative;
}

.modal-content {
position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    outline: 0;
}

.slick-prev:before, .slick-next:before {
  color: red;
}

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
       <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal Content</h3>
         </div>
        <div class="modal-body">
            <div class="container">
               <div class="row-fluid">
                  <div class="span12">

                     <div class="slider-for--gallery">
                        <div class="text-center">
                           <div><img class="img-fluid" src="https://source.unsplash.com/C6oPXOatFD8"></div>
                        </div>
                        <div class="text-center">
                           <div><img class="img-fluid" src="https://source.unsplash.com/OyCl7Y4y0Bk"></div>
                        </div>
                        <div class="text-center">
                           <div><img class="img-fluid" src="https://source.unsplash.com/5fNmWej4tAA"></div>
                        </div>
                     </div>

                     <div class="slider-nav--gallery">
                        <div class="text-center">
                           <div><img class="img-fluid" src="https://source.unsplash.com/C6oPXOatFD8" style="width: 200px;"></div>
                        </div>
                        <div class="text-center">
                           <div><img class="img-fluid" src="https://source.unsplash.com/OyCl7Y4y0Bk" style="width: 200px;"></div>
                        </div>
                        <div class="text-center">
                           <div><img class="img-fluid" src="https://source.unsplash.com/5fNmWej4tAA" style="width: 200px;"></div>
                        </div>
                     </div>

                  </div>
               </div>
            </div>
         </div>     
    </div>
  </div>   
</div>

I tried modal on shown and set the slick position to setPosition events but nothing happens.

Updates: For now here is the workaround.

.modal {
  display: block !important;
  overflow: hidden !important;
  height: 0px !important;
}
.modal.fade.in {
  opacity: 1 !important;
  display: block !important;
  height: auto !important;
  overflow-y: auto !important;
}

Answer 1

Have you tried using the bootstrap modal on shown function like this

  $('#myModal').on('shown', function() {
        $('.slider-for--gallery').slick('setPosition');
      $('.slider-nav--gallery').slick('setPosition');
    });