Slick slide không hiển thị khi load lần đầu

[khatrungan (Trần Nguyên Kha)]

Mình đang làm dự án về đại lý xe Toyota nhưng khi mình nhấn slick-slide vào ảnh thư viện thì nó ra như thế này:

Khi mình nhấn vào nút tròn thì nó mới hiện ảnh lên như thế này:

Mình đã xem source thì phát hiện lúc đầu slick-track có width=0

Khi nhấn vào nút tròn thì slick-track có width=5160px

Mình đã thử sử dụng chức năng !important để set width cho slick-track thì một số ảnh thì được. Nhưng một số ảnh thì bị lệch do width trong slick-strack là tự động tính. Chẳng hạn như mình set “width: 5160px !important” mà slick-strack tính là 6020px thì ảnh bị cắt mất. Mình đã thử sử dụng jquery nhưng hầu như không được.

Ai gặp lỗi này rồi giúp mình fix lỗi này được không ạ? Mình cám ơn ạ! Dưới đây là code của mình:
HTML:

• Ảnh bên ngoài:

<!--Thu vien-->
                <div id="sec_dt_03" class="scrollspy">
                    <div class="imgthuvien only-show-mb" id="thuvien_mb">
                        <img class="lazy" src="http://binhdinh.toyota.com.vn/data/news/3805/_1/stkrds.png?w=340&amp;h=170&amp;mode=crop" data-original="http://binhdinh.toyota.com.vn/data/news/3805/_1/stkrds.png?w=340&amp;h=170&amp;mode=crop" style="display: inline;">
                        <div class="txt">
                            <a data-href="yaris-1-5g-cvt/tinhnang?type=thuvien&amp;name=Yaris 1.5G CVT" class="link_pmb changelink" data-link="pmb_thuvien" href="yaris-1-5g-cvt/tinhnang?type=thuvien&amp;name=Yaris 1.5G CVT">
                                <div class="inner_txt">
                                    <p class="txt1">Thư viện</p>
                                    <p class="txt2">
                                        +6 hình
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="inner_scrollspy">
                        <div class="thuvien clearfix hide-mb">
                            <div class="heading_dt">
                                <p class="txt1">Thư viện 
                                    
                                </p>
                            </div>


                            <div class="list_01">
                                    <?php 
                                        $media_library = App\models\media::where([
                                            ['parent',$car->id],
                                            ['parent_type','library']
                                        ])->get();
                                    ?>
                                    @if(count($media_library) > 0)
                                    @foreach($media_library as $ml)
                                    <div class="item animated fadeInRightShort delay-150 go">
                                        <a class="open_popup_pc library" >
                                            <img class="lazy" height="{{ $ml->media_type=='video' ? '163px' : ''}}" src="{{ url($ml->url) }}"  alt="">
                                        </a>
                                    </div>
                                    @endforeach
                                    @endif
                            </div>
                            <div class="list_02">
                            </div>
                        </div>
                        <p class="view-more-btn">
                            <a class="changelink" data-href="yaris-1-5g-cvt/thuvien?name=Yaris 1.5G CVT&amp;gallery=thuvien" href="#"><span>Xem thêm...</span></a>
                        </p>
                    </div>
                </div>
                <!--End of Thu vien-->

• Ảnh trong modal:

    <div class="modal fade" id="modalLibrary" role="dialog">
        <div class="modal-dialog">
        
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Thư viện</h4>
                </div>
                <div class="modal-body">
                    <?php 
                        $media_library = App\models\media::where([
                            ['parent',$car->id],
                            ['parent_type','library']
                        ])->get();
                    ?>
                    
                    <div class="slider_library">
                        @foreach($media_library as $ml)
                            @if($ml->media_type=='video')
                            <iframe width="100%" height="475" src="https://www.youtube.com/embed/{{ $ml->name }}"></iframe>
                            @else
                            <img src="{{ url($ml->url) }}"  alt="">
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
          
        </div>
      </div>
      
    </div>

CSS:

<link rel=“stylesheet” type=“text/css” href="{{ asset(‘css/slick.css’) }}"/>
<link rel=“stylesheet” type=“text/css” href="{{ asset(‘css/slick-theme.css’) }}"/>

JQuery:

<script type=“text/javascript” src="{{ asset(‘js/jquery-migrate-1.2.1.min.js’) }}"></script>
<script type=“text/javascript” src="{{ asset(‘js/slick.min.js’) }}"></script>

    <script>
            var $library = jQuery.noConflict();
            $library(function(){
                $library('.slider_library').slick({
                    dots: true,
                });
                $library(".library").on('click', function(){
                    $library("#modalLibrary").modal();
                });
            })
    </script>

À jquery còn thiếu 1 file nữa, các bác qua trang này để lấy link nhé

slick - the last carousel you'll ever need

[SITUVN.gcd]

Thử thêm:

                $library(".library").on('click', function(){
                    $library("#modalLibrary").modal();
                    $library('.slider_library').slick('setPosition'); // Làm mới
                });